這篇文章主要介紹jQuery如何實現(xiàn)浮動層div瀏覽器居中顯示效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司是專業(yè)的平塘網(wǎng)站建設(shè)公司,平塘接單;提供成都網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行平塘網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
具體如下:
1.在頁面的head中引入jQuery
2.在頁面的head中加入浮動層和遮罩層的樣式
3.在頁面的底部加上浮動的div
4.添加顯示和隱藏的js函數(shù)
function show(){ //添加并顯示遮罩層 $("").addClass("mask").click(function() {}) .appendTo("body").fadeIn(0); document.getElementById("mask").style.display = "block"; var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#previewDiv").height(); var popupWidth = $("#previewDiv").width(); $("#previewDiv").css({ "position": "absolute", "top": (windowHeight-popupHeight)/2+$(document).scrollTop(), "left": (windowWidth-popupWidth)/2 }); $("#previewDiv").show(); } function hide(){ $("#mask").remove(); $("#previewDiv").hide(); }
完整實例代碼如下:
Test
運行效果圖如下:
以上是“jQuery如何實現(xiàn)浮動層div瀏覽器居中顯示效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!