<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击弹出窗口网页背景变暗且不可点的效果(div实现)</title>
<style type="text/css">
a {
color: #000;
font-size: 12px;
text-decoration: none
}
a:hover {
color: #900;
text-decoration: underline
}
#massage_box {
position: absolute;
left: expression((body.clientWidth-350)/ 2 );
top: expression((body.clientHeight-200)/ 2 );
width: 350px;
height: 200px;
filter: dropshadow(color = #666666, offx = 3, offy = 3,positive = 2);
z-index: 2;
visibility: hidden
}
#mask {
position: absolute;
top: 0;
left: 0;
width: expression(body.scrollWidth);
height: expression(body.scrollHeight);
background: #d3ddea;
filter: ALPHA(opacity =60);
z-index: 1;
visibility: hidden
}
.massage {
border: orange solid;
border-width: 1 1 3 1;
height: 176px;
overflow-y: auto;
background: #fff;
color: #036;
font-size: 12px;
line-height: 150%
}
.header {
background: orange;
height: 24px;
padding: 3 5 0 5;
color: #fff;
cursor: move;
}
</style>
<!--实现层移动-->
<script language="javascript">
var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove
function MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
function MMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}
function MUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}
function centerLayer( obj ) {
var ocw = obj.clientWidth;
var och = obj.clientHeight;
var bsl = document.body.scrollLeft || document.documentElement.scrollLeft;
var bst = document.body.scrollTop || document.documentElement.scrollTop;
var bcw = document.body.clientWidth || document.documentElement.clientWidth;
var bch = document.body.clientHeight || document.documentElement.clientHeight;
var osl = bsl + Math.floor( ( bcw - ocw ) / 2 );
osl = Math.max( bsl , osl );
var ost = bst + Math.floor( ( bch - och ) / 2 );
ost = Math.max( bst , ost );
obj.style.left = osl + 'px';
obj.style.top = ost + 'px';
}
function closeLayer(){
massage_box.style.visibility='hidden';
mask.style.visibility='hidden';//关闭子窗口
}
function openLayer(){
mask.style.visibility='visible';
massage_box.style.visibility='visible';
var obj = document.getElementById('massage_box');
centerLayer( obj );
}
</script>
</head>
<body>
<div id="massage_box">
<div class="header" onmousedown=MDown(massage_box)>
<table height="24" border="0" cellpadding="0" cellspacing="0"
width="100%"
style="color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
<tr>
<td>用户使用规则</td>
<td align="right">
<span onClick="closeLayer();" style="cursor: hand">【确定】</span>
<span onClick="closeLayer();" style="cursor: hand">【关闭】</span>
</td>
</tr>
</table>
</div>
<div class="massage">
<ul style="margin-right: 25">
<li>
用户必须自行配备上网和使用电信增值业务所需的设备,自行负担个人上网或第三方(包括但不限于电信或移动通信提供商)收取的通讯费、信息费等有关费用。
</li>
<li>
您同意本服务仅供个人使用且非商业性质的使用,您不可对本服务任何部分或本服务之使用或获得(包括但不限于QQ号码),进行复制、拷贝、出售、或利用本服务进行调查、广告、或用于其他商业目的。
</li>
<li>
保证自己在使用各服务时用户身份的真实性和正确性及完整性,如果资料发生变化, 您应及时更改。
</li>
<li>
在安全完成本服务的登记程序并收到一个密码及帐号后,您应维持密码及帐号的机密安全。
</li>
</ul>
</div>
</div>
<div id="mask"></div>
<span onClick="openLayer();" style="cursor: hand"><a href="#">显示提示信息</a>
<select>
<option>option1</option>
<option>option2</option>
</select>
</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
分享到:
相关推荐
div+css实现弹出窗口背景变暗效果 div+css实现弹出窗口
弹出居中DIV窗口,背景逐渐变暗,可以在调用时直接定义窗口的大小
网页上div拖拽,弹出div背景变暗 网页上div拖拽,弹出div背景变暗
主要介绍了JS+CSS实现Div弹出窗口同时背景变暗的方法,是一款比较典型的javascript操作弹出窗口的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
背景变暗的div可拖动提示窗口.点击弹出窗口背景变暗
点击文字弹出一个DIV层窗口代码,下载就能用
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
在页面加载后或者点击页面的某个链接时弹出一个div层,同时页面的其他地方会变灰
带数据div弹出层背景变暗.html DIV弹出层代码,效果很好。方便不换页浏览数据
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
lhgdialog DIV弹出窗口框架,基于JavaScript,它与Alert弹出窗口有着本质的区别,lhgdialog DIV弹出窗口是JS+CSS结合打造的产物,界面非常漂亮,无刷新弹出窗口。
一个漂亮的div弹出窗口样式 解压后双击html页面即可
自己制作的DIV模态窗口,点击弹出DIV窗口,后层页面屏蔽,实现模态窗口。需要用vs2010打开
div弹出窗口可拖动2
JS+CSS实现带关闭按钮的DIV弹出窗口
本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果。分享给大家供大家参考。具体如下: 这里仿网易点击弹出提示,背景变暗提示层效果,圆角,美观简洁,代码稍嫌多。 运行效果如下图所示: 在线演示地址如下...
div在网页中间弹出层并始终在中央,背景颜色变暗
完美弹出div窗口 修改版 完美遮罩 修复JQuery对浏览器判断的bug 支持IE6,7,8,FF jspanduanIE.html test无边框iframe完美遮罩.html demo.html 多种测试页面