關于彈出層的我的做法:
例如:點擊“修改”按鈕,彈出彈出框,并將需要修改的信息附到彈出框中;
思路:
1. 點擊修改按鈕,彈出陰影遮罩,陰影遮罩的樣式代碼如下:
.mask{ width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; z-index: 100; display: none; } 2.在陰影遮罩上彈出彈出框,讓彈出框出現在瀏覽器窗口的中間位置,彈出框的CSS樣式代碼如下:.upd_layer{ position:fixed; width:800px; height:350px; background-color:#fff; left:50%; top:50%; margin-left:-400px; display:none; margin-top:-250px; z-index:111; overflow:auto; padding-top:10px; } 3.彈出后發現陰影遮罩下的頁面還可以鼠標進行滾動,在js代碼中增加彈出時給body 設置“overflow:hidden”樣式,解決此問題,js代碼如下:$(".mask").show(); $(".upd_layer").show(); $("body").css("overflow","hidden");最后,發現在瀏覽器高度縮小時,彈出層的上部分可能被擋,可能影響小屏幕下的彈出效果,寫了一段調整位置的函數解決此問題,js代碼如下:
//隨時調整彈出層的位置 function adjustTanchuPos() { $('.upd_layer').height($(window).height() * 0.5); $('.upd_layer').css('margin-top', $('.upd_layer').height() * -0.5); } adjustTanchuPos(); $(window).resize(adjustTanchuPos); 這樣,該彈出層在窗口大小變動時,利用了jQuery中的resize()方法會隨時調整彈出層的位置。完整的demo詳見我的github: https://github.com/pluscai/tanchu_demo/blob/master/tanchu
新聞熱點
疑難解答