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

最新推荐文章于 2022-12-23 18:09:15 发布

庭博

最新推荐文章于 2022-12-23 18:09:15 发布

阅读量1.7k

点赞数

分类专栏： JAVA 金庭波

本文链接：https://blog.csdn.net/jintingbo/article/details/82344787

版权

金庭波同时被 2 个专栏收录

86 篇文章 1 订阅

订阅专栏

JAVA

85 篇文章 3 订阅

订阅专栏

现在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 οnclick="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="#" οnmοuseοver="showPopup(300,200);" >鼠标移入时</a><br />
       <a href="#" οnclick="showPopup(300,200);" >鼠标点击时</a><br />
       <div id="popupcontent">这是一个DIV弹窗效果!</div>
   </body>

</html>

庭博

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript用DIV模拟创建模态对话框

现在google浏览器不支持非模态对话框了，所以只好用DIV模拟创建一个模态对话框，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;div做弹窗口的效果&lt;/title&gt; &am
复制链接

扫一扫