DIV+CSS实现模态锁屏对话框-CSDN博客

首先就要在需要的页面里加入两个层，这也是我们实现的主角（mask和dialog).
然后为两个层设置CSS样式，做为mask当然就要半透明效果了，在IE中可以用filter实现，其它浏览器也有类似的实现方法，这里就不讲了。mask的with和height可以通过scrollWidth和scrollHeigth得到，让它充满整个浏览器。其它样式就自个调吧，反正偶不是一个擅做美工的人。
对话框dialog层要将z-index设置的高一点。这样才会在mask之上，另外要说明的是mask可以禁用网页上的input但是对select则需要将其另设为disable，在对话框关闭时将select重新置回enable。
接下就是用JS对层进行操作了，对话框肯定要有title,infomation之类，另外也要实现拖动。下面把代码帖上，大家看一下应该就会明白。

css样式文件
.#mask {
visibility:hidden;
background-color: #cccccc;
left:0px;
position:absolute;
top:0px;
background-image: none;
filter:alpha(opacity: 50);

}

.#dialog
{
visibility: hidden;
background-color: #f7fcfe;
z-index: 100;
width: 300px;
position: absolute;
height: 120px;

}

.dgtitle
{
width: 200px;
height: 18px;
font-size: 11pt;
color: #3333ff;
background-color: #eef2f6;
}

.dgfooter
{
height: 32px;
font-size: 11pt;
background-color: #eef2f6;
}
.formButton
{
background-color:#6699cc;
padding:2px 4px 3px 4px;
color:#000000;
font-size:8pt;
font-family:tahoma;
height:17px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#B4C5DF, EndColorStr=#91A9D0);
border-width:0px;
cursor: hand;
}

JS文件
function show(title,msg)
{
var d_mask=document.getElementById('mask');
var d_dialog = document.getElementById('dialog');

d_mask.style.width = document.body.clientWidth ;
d_mask.style.height=document.body.clientHeight;

d_dialog.style.top = document.body.clientHeight / 2 - 60;
d_dialog.style.left =document.body.clientWidth / 2 -100;

var Inner = "<input type='button' value='Close'οnclick='DialogClose()'/>"

var info = "<table cellspacing='0' width='100%'height='100%'>"+
"<tr ><td><imgsrc='info.gif'/>"
+title
+"</td><tdalign='right'><imgsrc='close1.gif' οnclick='DialogClose()'οnmοuseοver='Icon_Close_Over(this)'οnmοuseοut='Icon_Close_Out(this)'/></td></tr>"
+"<tr><td colspan='2'><img src='i.gif'/>"
+msg
+"</td></tr>"
+"<tr ><td></td><td>"
+"<center><input type='button' value='Close'οnclick='DialogClose()'/></center>"
+"</td></tr>"
+"</table>";

d_dialog.innerHTML =info;

disableSelect()

d_mask.style.visibility='visible';
d_dialog.style.visibility='visible';

}

function Icon_Close_Over(obj)
{
obj.src='close.gif';
}

function Icon_Close_Out(obj)
{
obj.src='close1.gif'
}

function DialogClose()
{
var d_mask=document.getElementById('mask');
var d_dialog = document.getElementById('dialog');

enableSelect()
d_mask.style.visibility='hidden';
d_dialog.style.visibility='hidden';
}

function document_event_mouseup(e)
{
var temp;
document.οnmοusemοve='';
temp=document.detachEvent?document.detachEvent('onmouseup',document_event_mouseup):document.removeEventListener('mouseup',document_event_mouseup,'');
}

window.onresize = function()
{
var d_mask=document.getElementById('mask');
var d_dialog = document.getElementById('dialog');

d_mask.style.width = document.body.clientWidth ;
d_mask.style.height=document.body.clientHeight;
}

测试页面文件
<html>
<head>
<title>无标题页</title>
<link href="modeldialog.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="modelDialog.js">

</script>

</head>

<body>
<table border='0' width="100%" height="100%">
<tr>
<td>
如果您打算在五一长假外出游玩，那么一款宽大舒适的可折叠顶棚的个性跑车或许是个不错的主意。在这个国内车市降价声音此起彼伏的春季，进口车是否耐得住寂寞呢？据网上车市价格监测体系显示，进口标致307CC北京地区4S店售价松动。目前优惠幅度为一万元，具体优惠措施如下图所示：
307CC是标致307的演变版本。CC代表“couplecabriolet”，代表既具轿跑车的操作性，又有敞篷车的潇洒风范。作为一款个性化的硬顶敞篷跑车，标致307CC于采用了双门式的设计。圆滑饱满的引擎盖线条逐渐向后延伸，柔和的过渡到a柱。前风档的大倾斜角度，与前鼻融相得益彰。尾部的个性化造型可谓是点睛之笔，精致的蝶衣型的LED尾灯让人眼前一亮，极具未来感。扰流板的线条过渡平滑，高位刹车灯巧妙的集成其中。
307CC最值得炫耀的卖点就是只要25秒就可以电动完成打开、收起工作的折叠硬顶，而需要实现的这一过程，只需要按动一个按钮即可。新型敞篷结构与车体间的密合度有高水平的表现，令车厢保有优异的隔音效果，完全破除了Topless车款必然嘈杂的传统思维。另外，宽大的内部空间也足以满足容纳四个成年人一起享受敞篷车带来的乐趣。
注重安全性是法国“猫科动物”的特点，对于一款可敞篷行驶的跑车而言更是如此。除了安全气囊和车门防撞钢梁外，诸如abs、eba、esp、asr等一应俱全。车身刚度方面，307cc在a柱沿车门前沿的车身内设计的补强结构可以弥补这方面的不足。而大家关心的碰撞安全方面，经历了严格的ncap碰撞试验的307cc交给了消费者4颗星的满意答卷。
作为国内为数不多的敞篷车型，307CC延续着法国标致的高端情怀。但是连同标致旗下的206cc与为数不多的其他进口可折叠硬顶跑车奔驰SLK200、雷克萨斯SC430相比，307cc的价格更能让人接受。现在北京的4S店又降了一万元，您准备好了吗？
</td>
</tr>
<tr><td ><input id="pos" type="text"/><select id="Select1">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option></option>
</select>
<input id="Radio1" type="radio" />
<input id="Radio2" type="radio" />
<textarea id="TextArea1" cols="20"rows="2"></textarea>
<img src="close.gif" style="margin-right:0px;marker-offset:600px; padding-right:0px; position:relative;left:500px" /></td></tr>
<tr><td><input type="button" value="Show Dialog"οnclick="show('网页提示','你按下了锁屏按钮!')" /><inputtype="button" value="test" οnclick="alert()"/></td></tr>
<tr><td></td></tr>
</table>

</body>
</html>