原理:
1. 点击按钮,触发窗口显示,遮罩层显示,并设置窗口的位置
2. 为弹出的窗口绑定鼠标滚动事件和视窗改变事件
3.点击关闭按钮,弹窗消失,遮罩层消失
html 代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <html> 4 <head> 5 <meta charset="utf-8" /> 6 <link rel="stylesheet" href="./css/tanchuang.css" /> 7 <script src="./js/tanchuang.js"></script> 8 </head> 9 <body style="height:3000px;"> 10 <input type="button" id="btn" value="触发按钮" /><br/> 11 <div id="login"> 12 <div class="header"> 13 <h3 id="move">用户登录窗口</h3> 14 <a href="javascript:;" class="close" id="close">X</a> 15 </div> 16 <div class="body"> 17 <h3>购物之前必须先登录</h3> 18 <ul> 19 <li><span>用户名:</span><input type="text" name="user" /></li> 20 <li><span>密码:</span><input type="text" name="userPwd" /></li> 21 <li class="act"><input type="submit" value="登录" class="log"/> <input type="submit" value="注册" class="zhuce"/></li> 22 </ul> 23 </div> 24 </div> 25 <div class="mask" id="mask"></div> 26 </body> 27 </html>