第一个特效：点击弹出对话框（效果：跟随滚动条，位置固定等）
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| <style> | |
| *{ | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .mask{ | |
| 100%; | |
| /*height: 500px;*/ | |
| background-color: gray; | |
| opacity: 0.5; | |
| z-index: 998; | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| } | |
| .login{ | |
| 400px; | |
| height: 300px; | |
| background-color: royalblue; | |
| position: fixed; | |
| /*left: 200px; | |
| top: 300px;*/ | |
| z-index: 999; | |
| } | |
| .close-btn{ | |
| 30px; | |
| height: 30px; | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| background-color: aquamarine; | |
| text-align: center; | |
| line-height: 30px; | |
| font-size: 30px; | |
| } | |
| .close-btn:hover{ | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input type="button" value="登录" id="login" /> | |
| <script> | |
| document.getElementById("login").onclick = function(){ | |
| var x = "<div class='close-btn'>X</div>"; | |
| showLogin(x); | |
| } | |
| </script> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> | |
| <!--<div class="mask"></div>--> | |
| <!--<div class="login"> | |
| <div class="close-btn">X</div> | |
| </div>--> | |
| </body> | |
| </html> | |
| <script> | |
| function showLogin(x){ | |
| var bodyHeight = document.body.clientHeight; | |
| var clientHeight = document.documentElement.clientHeight; | |
| var clientWidth = document.documentElement.clientWidth; | |
| var mask = document.createElement("div"); | |
| mask.className = "mask"; | |
| mask.style.height = bodyHeight + "px"; | |
| mask.onclick = function(){ | |
| mask.remove(); | |
| login.remove(); | |
| }; | |
| document.body.appendChild(mask); | |
| var login = document.createElement("div"); | |
| login.className = "login"; | |
| login.style.left = clientWidth/2 - 200 + "px"; | |
| login.style.top = clientHeight/2 - 150 + "px"; | |
| login.innerHTML = x; | |
| document.body.appendChild(login); | |
| document.getElementsByClassName("close-btn")[0].onclick = function(){ | |
| mask.remove(); | |
| login.remove(); | |
| } | |
| } | |
| document.body.onresize = function(){ | |
| var clientHeight = document.documentElement.clientHeight; | |
| var clientWidth = document.documentElement.clientWidth; | |
| var login = document.getElementsByClassName("login")[0]; | |
| login.style.left = clientWidth/2 - 200 + "px"; | |
| login.style.top = clientHeight/2 - 150 + "px"; | |
| } | |
| </script> |