當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery之编写弹窗

發(fā)布時間：2023/12/13 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery之编写弹窗小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

演示地址：http://sandbox.runjs.cn/show/irefekbs

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{ margin: 0; padding: 0;}#login { z-index:9999; height: 200px; width: 300px; background: #ccc; padding-top: 30px; box-shadow: 0 0 20px rgba(0,0,0, 0.2); border-radius: 5px; position: absolute; /*top: 225px; left: 500px;*/}#login p { margin: 10px auto; width: 250px; }#login p:nth-child(1) { margin-top: 50px; }#close { position: absolute; top: 10px; right: 10px; cursor: pointer;}#loading-mask {position: absolute; top: 0; left: 0; /*width: 100%; height: 1030px;*/ background: rgba(0,0,0, 0.4);}</style><script type='text/javascript' src='http://files.cnblogs.com/littledu/littledu.js'></script><script>$(function(){$('#open').click(function(){//遮罩層var mask = $('<div id="loading-mask"></div>');mask.css('width', $('body').width());mask.css('height', $('body').height());$('body').append(mask);//彈窗var oLogin = $('<div id="login"><p>用戶名：<input type="text"></p><p>密 碼：<input type="text"></p><div id="close">X</div></div>');$('body').append(oLogin);//設(shè)置彈窗的顯示位置 oLogin.css('left', ($(window).width() - oLogin.width())/2 ); oLogin.css('top', ($(window).height() - oLogin.height())/2 );//瀏覽器窗口或滾動條改變時 $(window).on('resize scroll', function(){oLogin.css('left', ($(window).width() - oLogin.width())/2 + $(window).scrollLeft()); oLogin.css('top', ($(window).height() - oLogin.height())/2 + $(window).scrollTop()); });//移除遮罩和彈窗 $('#close').click(function(){mask.remove();oLogin.remove();});});});</script> </head> <body style="height:1000px;">  <input type="button" value="彈窗" id="open"> </body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/jasontoyell/p/4784099.html

總結(jié)

以上是生活随笔為你收集整理的JQuery之编写弹窗的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

jquery