首页 > 其他分享 >点击连接弹出窗口层,并且背景变暗…

点击连接弹出窗口层,并且背景变暗…

时间:2022-12-26 15:31:41浏览次数:60  
标签:opacity style jscode www display 点击 background 窗口 变暗


方法一:





​http://www.jscode.cn/jscode/code_360804725.htm​​ 

​http://www.jscode.cn/jave_window/360804725.htm​


<!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" lang="zh-CN">

<head>
<!-- meta data -->
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content="在远方@www.jscode.cn" />
<meta name="Copyright" content="Copyright (c) jscode.cn" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<meta name="description" content="网页特效观止" />
<meta name="keywords" content="网页特效,网页特效代码" />
<!-- site title -->
<title>点击弹出窗口层,并且背景变暗渐变---网页特效观止|www.jscode.cn|网页特效代码</title>
<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
    z-index:10001;
    width:500px;
    height:400px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:50%;
    top:20%;
    font-size:12px;
    margin-left:-225px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity: 0.6;
}
</style>
<script type="text/javascript">
function showDetail() { //在远方www.jscode.cn
//背景
  var bgObj=document.getElementByIdx_x("bgDiv");
  bgObj.style.width = document.body.offsetWidth + "px";
 

//定义窗口
  var msgObj=document.getElementByIdx_x("msgDiv");
  msgObj.style.marginTop = -75 + 

//关闭
  document.getElementByIdx_x("msgShut").onclick = function(){
  bgObj.style.display = msgObj.style.display = "none";
  }
  msgObj.style.display = bgObj.style.display = "block";
  msgDetail.innerHTML="<p align=center>小窗口里的内容</p><p align=center><A href=http://www.jscode.cn><FONT color=#0000ff>网页特效观止</FONT></A></p>"
}
</script>
</head>

<body>

<div id="msgDiv">
 <div id="msgShut">
  关闭</div>
 <div id="msgDetail">
 </div>
</div>
<div id="bgDiv">
</div>
<p> </p>
<p><a href="#" onClick="showDetail()">点击我试试看</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>更多网页特效代码尽在 <a href="http://www.jscode.cn/">网页特效观止</a></p>

</body>

</html>


方法二:


​http://js.alixixi.com/a/2010083064308.shtml​

<style>

.bg{position:absolute;z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;}

.beian_winBG {

MARGIN-TOP: -100px; LEFT: 50%; MARGIN-LEFT: -190px; WIDTH: 376px; POSITION: absolute; TOP: 50%; HEIGHT:200px;border:#666666 1px solid;z-index: 1000;

}

</style>

<div id="alert_win" style="display:none;">

<div id="mask" style="top:0;left:0;position: absolute;z-index:1000;" class="bg"></div>

<DIV class=beian_winBG id=beian_popup><!--弹出框-->

<div id="divOneStep" style="z-index:1002;width:100%;height:200px;background: #fff;position:absolute;">

<div style="width:100%;background:#f1f1f1;height:30px;light-height:30px;border-bottom:#666666 1px solid;text-align:right;"><a href="javascript:;" onClick="alert_win.style.display='none';">点此关闭</a> </div>

<div>您的选择,不会错的,站长特效欢迎您。</div>

</div>

<div style="z-index:1001;position:absolute;"><iframe id="frmOneStep" width="100%" height="200" frameborder="0" scrolling="no" src="about:blank"></iframe></div>

</DIV>

</div>

<a href="javascript:;" onClick="alert_win.style.display='block';">点击这里</a>



标签:opacity,style,jscode,www,display,点击,background,窗口,变暗
From: https://blog.51cto.com/haibo0668/5969135

相关文章