<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>qdabc.cn</title> <style type="text/css"> #dialog{ background-color:#D2ADAD; width:400px; height:400px; z-index:999; display:none; position:relative; } #close{ float: right; width: 10px; height: 10px; padding: 5px 10px 0px 0px; cursor:pointer; } #dialogContent{ text-align:center; margin:20px; } </style> </head> <body> <div> <button id="click">提交</button> </div> <div id="dialog" > <span>弹窗</span><span id="close">X</span> <div id="dialogContent"> 内容 </div> </div> <script type="text/javascript"> document.getElementById("click").onclick = function(evt){ document.getElementById("dialog").style.display = 'block'; document.getElementById("dialog").style.top = (document.documentElement.clientHeight-400)/2 +'px'; document.getElementById("dialog").style.left = (document.documentElement.clientWidth-400)/2 +'px'; } document.getElementById("close").onclick = function(evt){ document.getElementById("dialog").style.display = 'none'; } </script> </body> </html>
欢迎分享本文,转载请保留出处:前端ABC » JavaScript页面交互效果-窗口提示