JS 弹出窗口（DZ论坛）

 效果图：

 

调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>列表页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <link href="~/Css/modelpopup.css" rel="stylesheet" type="text/css" />
    <script src="../js/modalpopup.js" type="text/javascript"></script>
    <script type="text/javascript">
        function newMenu()
        {
            BOX_show('neworeditmainmenu');
        }
        </script>

</head> 

 <div id="BOX_overlay" style="background: #000; position: absolute; z-index:100; filter:alpha(opacity=50);-moz-opacity: 0.6;opacity: 0.6;"></div>

     <div id="neworeditmainmenu" style="display: none; background :#fff; padding:10px; border:1px solid #999; 400px;">
     <fieldset>
       <legend id="opt" style="background:url(../Img/icons/icon53.jpg) no-repeat 6px 50%;">新建主菜单</legend>
            <table cellspacing="0" cellPadding="4" class="tabledatagrid" width="80%">
                    <tr>
                        <td width="30%">
                            主菜单名称:
                            <input type="hidden" id="menuid" name="menuid" value="0" />
                            <input type="hidden" id="mode" name="mode" value="" />
                        </td>
                        <td width="70%"><input id="menutitle"  name="menutitle" type="text" maxlength="8" size="10"class="FormBase" onfocus="this.className='FormFocus';" onblur="this.className='FormBase';" /></td>
                    </tr>
                    <tr>
                        <td>默认展现<br />页面地址:</td>
                        <td><input id="defaulturl" name="defaulturl" type="text" maxlength="100" size="30" class="FormBase" onfocus="this.className='FormFocus';" onblur="this.className='FormBase';" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <button type="button" class="ManagerButton" id="AddNewRec" onclick="chkSubmit();"><img src="../images/add.gif"/> 提 交 </button>&nbsp;&nbsp;
                            <button type="button" class="ManagerButton" id="Button3" onclick="BOX_remove('neworeditmainmenu');"><img src="../images/state1.gif"/> 取 消 </button>
                        </td>
                    </tr>
                </table>
       </fieldset>
     </div>
     <div id="setting" />

JS代码： modalpopup.js

 //显示

function BOX_show(e) 
{   
    if(document.getElementById(e)==null){return;}
    BOX_layout(e);
    window.onresize = function(){BOX_layout(e);} //改变窗体重新调整位置
    window.onscroll = function(){BOX_layout(e);} //滚动窗体重新调整位置
}

//移除
function BOX_remove(e)
{   
    document.getElementById('BOX_overlay').style.display="none";
    document.getElementById(e).style.display="none";
    
    window.onscroll = null;
    window.onresize = null;
}

//调整布局
function BOX_layout(e)
{
    var a = document.getElementById(e);
    
    //判断是否新建遮掩层
    if (document.getElementById('BOX_overlay')==null)
    { 
        var overlay = document.createElement("div");
        overlay.setAttribute('id','BOX_overlay');
        a.parentNode.appendChild(overlay);
    }
    //alert(a.style.width + "," + a.style.height);
    //alert("clientWidth:" + window.parent.innerWidth + ",clientHeight:" + window.parent.innerHeight);
    //取客户端左上坐标，宽，高
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    var clientWidth = document.documentElement.clientWidth;
    var clientHeight = document.documentElement.clientHeight;
    var bo = document.getElementById('BOX_overlay');
    bo.style.left = scrollLeft+'px';
    bo.style.top = scrollTop+'px';
    bo.style.width = clientWidth+'px';
    bo.style.height = clientHeight+'px';
    bo.style.display="";
    //Popup窗口定位
    a.style.position = 'absolute';
    a.style.zIndex=101;
    a.style.display="";
    //a.style.left = "40%";
    //a.style.top = "40%";
    //a.style.left = ((document.documentElement.clientWidth - 780) / 2) + "px";
    //a.style.top = "-10px";
    
    document.getElementById('setting').style.display="block";
    a.style.left = ((document.documentElement.clientWidth - a.clientWidth) / 2) + "px";
    var top = (parseInt((document.documentElement.clientHeight - a.clientHeight - 43) / 2));
    top = parseInt((document.documentElement.clientHeight - a.clientHeight - 43) / 2);  
    if(top < 0)
        top = 0;
    top += document.documentElement.scrollTop;
    a.style.top = top + "px";
}

Css: modelpopup.css

#BOX_overlay {
        position: absolute;
        z-index:100;
        top: 0px;
        left: 0px;
        background-color:#000;
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
    }
    .PopUpModel{ background-color:#FFFFFF; border: 1px solid BLACK;  height:auto; text-align:center;width:900px; }
    .ctrl_title{ background:#f1f1f1 url(Img/modalpopup/topbarbg.gif) repeat-x 0 100%; color:#000000; margin:0px; padding:1px 1px;text-align:left; font-size:12px; FONT-WEIGHT: bold;}
        .ctrl_title img {float:right; padding-top:3px; padding-right:3px;}
    .ctrl_footer{ padding:7px 7px 15px 7px}
    .ctrl_Button{ border:1px solid #666;  margin:0 5px 0 5px;}
    .ctrl_input{ border:1px solid #666;}
    #searchresult {padding:2px;}
        #searchresult a{color:#999;}
    *+html #searchresult ul li ul {margin-top:-15px;}

    * html #searchresult ul li ul {margin-top:-15px;} 

这个是DZ的弹出窗口。

作者：罗敏贵
邮箱：minguiluo@163.com
QQ群：34178394 建群 主要是寻找志同道合的人士一起学习和讨论自己的所学所思
出处：http://luomingui.cnblogs.com/
说明：专注于微软平台项目架构、熟悉设计模式、架构设计、敏捷个人和项目管理。现主要从事WinForm、ASP.NET、等方面的项目开发、架构、管理工作。文章为作者平时里的思考和练习，可能有不当之处，请博客园的园友们多提宝贵意见。
知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/luomingui/p/2080334.html