原理:

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>
View Code

相关文章: