JavaScript+DIV模态对话框的完美实现（克服select问题）

最新推荐文章于 2022-02-21 16:09:57 发布

原创最新推荐文章于 2022-02-21 16:09:57 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #div #function #iframe

本文提供了一种使用JavaScript和DIV实现模态对话框的方法，该方法能够解决select元素在模态框出现时不可见的问题。通过创建一个遮罩层和一个iframe，可以确保模态框正确显示的同时，页面上的select下拉框仍然可用。

对于JavaScript+DIV模态对话框的方法很多，但是普遍都存在一个缺点，就是select不可见。一下是我从一个国外论坛上看到的实现，其完美的解决了我们之前所看到的select不可见问题。

var maskpanel=function()
    {
        this.divobj;
        this.show=function()
        {
          if(!document.getElementById("xdivmasking"))
          {
              var divEle=document.createElement('div');
              divEle.setAttribute("id","xdivmasking");
              document.body.appendChild(divEle);
              var divSty=document.getElementById("xdivmasking").style;
              divSty.position="absolute";divSty.top="0px";divSty.left="0px";divSty.zIndex="46";divSty.opacity=".50";divSty.backgroundColor="#000";
              divSty.filter="alpha(opacity=50)";

              var divFram=document.createElement('iframe');
              divFram.setAttribute("id","xmaskframe");
              document.body.appendChild(divFram);
              divSty=document.getElementById("xmaskframe").style;
              divSty.position="absolute";divSty.top="0px";divSty.left="0px";divSty.zIndex="45";divSty.border="none";divSty.filter="alpha(opacity=0)";
           }

           this.divobj=document.getElementById("xdivmasking");
           this.waitifrm=document.getElementById("xmaskframe");

           var dsh=document.documentElement.scrollHeight;
           var dch=document.documentElement.clientHeight;
           var dsw=document.documentElement.scrollWidth;
           var dcw=document.documentElement.clientWidth;

           var bdh=(dsh>dch)?dsh:dch;
           var bdw=(dsw>dcw)?dsw:dcw;

           this.waitifrm.style.height=this.divobj.style.height=bdh+'px';
           this.waitifrm.style.width=this.divobj.style.width=bdw+'px';
           this.waitifrm.style.display=this.divobj.style.display="block";
        };
        this.hide=function()
        {
            this.waitifrm.style.display=this.divobj.style.display="none";
        };
    }

将以上代码包含于body体的script块中。

显示实现：

divmask=new maskpanel();

divmask.show();

关闭实现：

divmask.hide();