js實現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(){
? ? /*第三步創建一個div并設置為.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();
寫到這就發現，這時候那個按鈕還木有被遮罩層遮住，所以還應該調整下html的排版.....總結bootstrap還是太方便了~
2015-12-16
你這樣寫太麻煩，且不規范，像BootStrap這樣，直接css定義一個fixed的背景遮罩層類，觸發的時候添加該類名，關閉則去掉類名。
再者使用jQuery 實現還是非常簡單。