JQuery之编写弹窗
生活随笔
收集整理的這篇文章主要介紹了
JQuery之编写弹窗
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
演示地址：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);//設置彈窗的顯示位置 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;"> <!-- <div id="loading-mask"></div> --> <input type="button" value="彈窗" id="open"> <!-- <div id="login"><p>用戶名：<input type="text"></p><p>密 碼：<input type="text"></p><div id="close">X</div> </div> --></body> </html>?
轉載于:https://www.cnblogs.com/jasontoyell/p/4784099.html
總結
以上是生活随笔為你收集整理的JQuery之编写弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 支付宝提现要手续费吗？
- 下一篇： HDU 4414 Finding cro