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

tjava_net 2010-12-06 02:16:00

...全文

490 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

jinhuah 2010-12-07

打赏
举报

look at csdn , everyday

wangbin8529 2010-12-07

打赏
举报

<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>

wuyq11 2010-12-06

打赏
举报

弹出页面如jwindow

function 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);
}

anbin0814 2010-12-06

打赏
举报



<A onclick="showScreen（显示的层）">登录</A>

anbin0814 2010-12-06

打赏
举报



<style type="text/css">



#Screen {

  position:absolute;

  z-index: 9998;

  top: 0px;

  left: 0px;

  background: #000000;

  display: none;

  filter: alpha(Opacity=50);

}

#Message {

  position: absolute;

  z-index: 9999;

  top: 180px;  

  left: 340px;

  display: none;

}



function getWidth()

        {

          var strWidth,clientWidth,bodyWidth;

          clientWidth = window.parent.document.documentElement.clientWidth;

          bodyWidth = window.parent.document.body.clientWidth;

          if(bodyWidth > clientWidth){

          strWidth = bodyWidth + 20;

          } else {

          strWidth = clientWidth;

          }

          return strWidth;

        }

        //获取高度

        function getHeight()

        {

          var strHeight,clientHeight,bodyHeight;

          clientHeight = window.parent.document.documentElement.clientHeight;

          bodyHeight = document.body.clientHeight;

          if(bodyHeight > clientHeight){

          strHeight = bodyHeight + 30;

          } else {

          strHeight = clientHeight;

          }

          return strHeight;

        }

        // 锁屏

        function showScreen(nodeid)

        {

          var Element = window.parent.document.getElementById('Message');

          var Elements = window.parent.document.getElementById('Screen');

          document.getElementById("TreeParen").value=nodeid;

          Elements.style.width = getWidth();

          Elements.style.height = getHeight();

          Element.style.display = 'block';

          Elements.style.display = 'block';

        }

        //解屏

        function hideScreen()

        {

          var Element = window.parent.document.getElementById('Message');

          var Elements = window.parent.document.getElementById('Screen');

          Element.style.display = 'none';

          Elements.style.display = 'none';

        }



<div id="Message">

  <table width="300" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#CCCCCC">

  <tr>

  <td height="28" align="right" bgcolor="#F2F2F2"><span style="cursor:pointer;" onclick="javascript:hideScreen();">关闭</span> </td>

  </tr>

  <tr>

  <td height="150" align="center" bgcolor="#F2F2F2">



	  <table>

	    <tr>

	       <td><font color="blue" size="-1">节点名:</font>

	       <input type="text" name="TreeName" style="width: 100px" />

	       </td>

	    </tr>

	    <tr>

	        <td><input type="hidden" name="TreeParen" value="" /></td>

	    </tr>

	    <tr>

	        <td>

	        <input type="button" value="添加" style="margin-left:50px;" onclick='javascript:window.frames["menu"].addNode();' />

	        <input type="button" value="取消" onclick="javascript:hideScreen();"  />

	        </td>

	    </tr>

	  </table>

  </td>

  </tr>

  </table>

</div>



----------

<div id="Screen"></div>