javaScript用DIV模拟创建模态对话框

现在google浏览器不支持非模态对话框了，所以只好用DIV模拟创建一个模态对话框，代码如下：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title>div做弹窗口的效果</title>
       <script type="text/javascript">
           var baseText = null;

function showPopup(w, h) {

//窗口弹出时启动定时器让本窗口5秒后自动关闭并清除定时器
               var t1=setTimeout(refreshCount, 1000 * 5);
               var popUp = document.getElementById("popupcontent");
               popUp.style.top = "200px";
               popUp.style.left = "200px";
               popUp.style.width = w + "px";
               popUp.style.height = h + "px";
               if(baseText == null) baseText = popUp.innerHTML;

//双引号中含单引号或单引号中含双引号，这样就不用在字符串内使用转义字符"\"了。
               popUp.innerHTML = baseText + '<div id="statusbar"><button onclick="hidePopup();">Close window</button></div>';
               var sbar = document.getElementById("statusbar");
               sbar.style.marginTop = (parseInt(h) - 40) + "px";
               popUp.style.visibility = "visible";
               popUp.style.visibility = "visible";
           }

           function refreshCount() {
               //必须先关闭窗口，然后清除定时器！顺序搞反了后，窗口关闭不了。
               hidePopup();
               clearTimeout(t1);
           }

           function hidePopup() {
               var popUp = document.getElementById("popupcontent");
               popUp.style.visibility = "hidden";
           }

       </script>

       <style type="text/css">
           #popupcontent {

position: absolute;

visibility: hidden;

overflow: hidden;
               border: 1px solid #CCC;
               background-color: #F9F9F9;
               border: 1px solid #333;
               padding: 5px;
           }
       </style>
   </head>

   <body>
       <a href="#" onmouseover="showPopup(300,200);" >鼠标移入时</a><br />
       <a href="#" onclick="showPopup(300,200);" >鼠标点击时</a><br />
       <div id="popupcontent">这是一个DIV弹窗效果!</div>
   </body>

</html>

javaScript用DIV模拟创建模态对话框

猜你喜欢