如何在一个网页中弹出一个层并且用另外一个层遮盖整个网页

是不是div遮罩层啊那是JS特效的东西上网上找多的是～！

弹出页面如jwindowfunction show(obj)
  {
  var range = getRange();
  $('div2').style.width = range.width + "px";
  $('div2').style.height = range.height + "px";
  $('div2').style.display = "block";
  document.getElementById(obj).style.display="";

  }
  function getRange()
  {
  var top= document.body.scrollTop;
  var left= document.body.scrollLeft;
  var heigh = document.body.clientHeight;
  var width = document.body.clientWidth;
  if (top==0 && left==0 && height==0 && width==0)
  {
  top = document.documentElement.scrollTop;
  left= document.documentElement.scrollLeft;
  height= document.documentElement.clientHeight;
  width = document.documentElement.clientWidth;
  }
  return {top:top ,left:left ,height:height ,width:width } ;
  }

遮罩
jwindow
function OpenWindow(id,width,height)
{
  var url = "a.aspx";
  OpenJWindow('#openwin', url, width,height, EditClosed);
}

    <html>
     <head>
      <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
     <title>弹出窗口登录效果</title>
    <style>
    body,p {
        margin: 0;
        padding: 0;
        text-align: center;
        font: normal 14px/180% Tahoma,sans-serif;
    }
    #loginBox {
        margin: 0 auto;
        padding: 0px;
        text-align: left;
        width: 280px;
        height: 150px;
        background: #EAEEFF;
        font-size: 9pt;
        border: 1px solid #829AFF;
        overflow: hidden;
        filter: alpha(opacity=90);
        opacity: 0.9;
    }
    #loginBox .title {
        text-align: left;
        padding-left: 10px;
        font-size: 11pt;
        border-bottom: 1px solid #829AFF;
        height: 25px;
        line-height: 25px;
        cursor: move;
    }
    #loginBox .t1 {
        float: left;
        font-weight: bold;
        color: #AA7B7B;
        text-decoration: none;
    }
    #loginBox .t2 {
        float: right;
        text-align: center;
        line-height: 18px;
        height: 18px;
        width: 18px;
        margin-top: 3px;
        margin-right: 2px;
        overflow: hidden;
        border: 1px solid #FF5889;
        background: #FFE0E9;
        cursor: pointer;
    }
    #loginBox .login {
        text-align: center;
        width: 100%;
        height: 100%;
    }
    input.submit {
        float: right;
        border: 1px solid #829AFF;
        FONT-SIZE: 9pt;
        background: #EAEEFF;
        HEIGHT: 20px;
        margin-top: 5px;
        margin-right: 70px;
    }
    #bgDiv {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        background-color: #777;
        filter: progid: DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75) filter: alpha(opacity=70);
        opacity: 0.7;
    }
    </style>
     </head>
     <body>
     <div id="bgDiv" style="display:none;">
     </div>
       <a href="javascript:" onClick="bgDiv.style.display='';login.style.display='';">登录</a>
     <div style="position:absolute; left:378px; top:150px; z-index:1; display: none;" id="login">
      <div id="loginBox">
        <p class="title" id="Mdown"><span class="t1">登录</span><span class="t2" title="关闭" onClick="login.style.display='none';bgDiv.style.display='none'">X</span></p>
    　　　　   <div class="login"><form method="post" action="post.asp">用户名:<input type="text"name="UserName" size="12" maxlength="10"><div class="login">密　码:<input type="text"name="Password" size="12" maxlength="10"></div><input class="submit" type="submit" value="登录"></form></div>
        </div>
     </div>
    <script type="text/javascript">
          var IsMousedown, LEFT, TOP, S;
          document.getElementById("Mdown").onmousedown=function(e) {
            S = document.getElementById("login");
            IsMousedown = true;
            e = e||event;
            LEFT = e.clientX - parseInt(S.style.left);
            TOP = e.clientY - parseInt(S.style.top);
            document.body.onmousemove = function(e) {
                e = e||event;
                if (IsMousedown) {
                    S.style.left = e.clientX - LEFT + "px";
                    S.style.top = e.clientY - TOP + "px";
                }
            }
            document.onmouseup=function(){IsMousedown=false;}
       }
    </SCRIPT>
    </body>
    </html>

look at csdn , everyday

调试易

如何在一个网页中弹出一个层并且用另外一个层遮盖整个网页

解决方案 »