简单弹出遮障层实例
?1?<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?2?<html?xmlns="http://www.w3.org/1999/xhtml"?>
?3?<head>
?4?????<title>無標題頁</title>
?5?<style?type="text/css">
?6?.overlay
?7?{
?8?????display:none;
?9?????position:absolute;
10?????top:0;
11?????left:0;
12?????width:100%;
13?????background:#ffffff;
14?????z-index:990;
15?????filter:alpha(opacity=50);?
16?????opacity:0.5;
17?}
18?.div1
19?{
20?????width:100%;
21?????height:1500px;
22?????background:#c8dcfa;
23?}
24?</style>
25?<script?type="text/javascript">
26?????function?OpenLayer(id)
27?????{
28?????????var?lay?=?document.getElementById(id);
29?????????lay.style.height=document.body.scrollHeight+"px";
30?????????lay.style.display="block";
31?????}????
32?</script>
33?
34?</head>
35?<body>????
36?????<div?id="layer"?class="overlay">
37?????</div>????
38?????????
39?????<div?class="div1">
40?????????<input?type="button"?value="點擊彈出層"?onclick="OpenLayer('layer')"?/>
41?????</div>
42????
43?</body>
44?</html>
<html?xmlns="http://www.w3.org/1999/xhtml"?>
<head>
????<title>無標題頁</title>
<style?type="text/css">
.overlay
{
????display:none;
????position:absolute;
????top:0;
????left:0;
????width:100%;
????background:#ffffff;
????z-index:990;
????filter:alpha(opacity=50);?
????opacity:0.5;
}
.div1
{
????width:100%;
????height:1500px;
????background:#c8dcfa;
}
</style>
<script?type="text/javascript">????
????var?layer;
????function?OpenLayer()
????{??
????????if(!layer)
????????{???
????????????layer?=?document.createElement("div");
????????????layer.className="overlay";
????????????document.body.appendChild(layer);
????????}????????
????????layer.style.height=document.body.scrollHeight+"px";
????????layer.style.display="block";????????
????}????
</script>
</head>
<body>???????
????<div?class="div1">
????????<input?type="button"?value="點擊彈出層"?onclick="OpenLayer()"?/>
????</div>
???
</body>
</html>
?2?<html?xmlns="http://www.w3.org/1999/xhtml"?>
?3?<head>
?4?????<title>無標題頁</title>
?5?<style?type="text/css">
?6?.overlay
?7?{
?8?????display:none;
?9?????position:absolute;
10?????top:0;
11?????left:0;
12?????width:100%;
13?????background:#ffffff;
14?????z-index:990;
15?????filter:alpha(opacity=50);?
16?????opacity:0.5;
17?}
18?.div1
19?{
20?????width:100%;
21?????height:1500px;
22?????background:#c8dcfa;
23?}
24?</style>
25?<script?type="text/javascript">
26?????function?OpenLayer(id)
27?????{
28?????????var?lay?=?document.getElementById(id);
29?????????lay.style.height=document.body.scrollHeight+"px";
30?????????lay.style.display="block";
31?????}????
32?</script>
33?
34?</head>
35?<body>????
36?????<div?id="layer"?class="overlay">
37?????</div>????
38?????????
39?????<div?class="div1">
40?????????<input?type="button"?value="點擊彈出層"?onclick="OpenLayer('layer')"?/>
41?????</div>
42????
43?</body>
44?</html>
js方式實現(xiàn):
?
<!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"?>
<head>
????<title>無標題頁</title>
<style?type="text/css">
.overlay
{
????display:none;
????position:absolute;
????top:0;
????left:0;
????width:100%;
????background:#ffffff;
????z-index:990;
????filter:alpha(opacity=50);?
????opacity:0.5;
}
.div1
{
????width:100%;
????height:1500px;
????background:#c8dcfa;
}
</style>
<script?type="text/javascript">????
????var?layer;
????function?OpenLayer()
????{??
????????if(!layer)
????????{???
????????????layer?=?document.createElement("div");
????????????layer.className="overlay";
????????????document.body.appendChild(layer);
????????}????????
????????layer.style.height=document.body.scrollHeight+"px";
????????layer.style.display="block";????????
????}????
</script>
</head>
<body>???????
????<div?class="div1">
????????<input?type="button"?value="點擊彈出層"?onclick="OpenLayer()"?/>
????</div>
???
</body>
</html>
Demo:http://files.cnblogs.com/huangweiwei/OverlayLayer2.rar
轉載于:https://www.cnblogs.com/huangweiwei/archive/2012/05/28/OverLayLayer.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： [linux]cp和mv对文件和链接影响
- 下一篇： Nhibernate 3.0 cookb