js實(shí)現(xiàn)bootstrap中的modal效果
先增加button按鈕的屬性id="button"，并且假定在沒有bootstrap.css的情況下div.modal的opacity="0";
var Show=function(e){
? /*第一步獲取body；可以直接用document.body獲取，或者下面的方法*/
? this.el=document.getElementById('button');
? this.body=this.el.parentNode;
? /*獲取在第三步中要顯示的modal*/
? this.el_show=document.getElementById('themodal');
? /*第二步為button添加單擊事件(有多種方式)*/
? this.el.addEventListener('click',function(){
? ? /*第三步創(chuàng)建一個(gè)div并設(shè)置為.5透明的背景遮罩層，并且顯示div.modal*/
? ? this.el.innerHTML.unshift('<div class="layer" style="width:100%;height:100%;opacity:.5;"></div>').join("");
? ? this.el_show.style.opacity='1';
? });
};
var show=new Show();
寫到這就發(fā)現(xiàn)，這時(shí)候那個(gè)按鈕還木有被遮罩層遮住，所以還應(yīng)該調(diào)整下html的排版.....總結(jié)bootstrap還是太方便了~
2015-12-16
你這樣寫太麻煩，且不規(guī)范，像BootStrap這樣，直接css定義一個(gè)fixed的背景遮罩層類，觸發(fā)的時(shí)候添加該類名，關(guān)閉則去掉類名。
再者使用jQuery 實(shí)現(xiàn)還是非常簡單。