利用遮罩层的弹出层（1）（非常简单） 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<style>
<!--
    body, div, h2{ margin:0; padding:0;}
    html, body{ overflow:hidden; height:100%; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333;}
    #mask{ background:#000; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.5;filter:alpha(opacity=50); display:none;}
    #showbox{ width:400px; height:200px; position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px; z-index:1; background:#fff; border-radius:5px; box-shadow: 0 1px 3px 2px #666; display:none;}
    #title{ margin:5px; position:relative; height:27px; border-bottom:1px solid #333; line-height:28px;}
    #play{ position:absolute; right:5px; top:5px; width:50px;}
    #play a.close{ float:right; width:16px; height:16px; background:url(img/close.png) 0 0 no-repeat;}
    #message{ margin:5px; height:155px; overflow:hidden; line-height:19px;}
-->
</style>
<script>
<!--
    window.onload=function()
    {
        var input=document.getElementsByTagName("input")[0];
        var mask=document.getElementById("mask");
        var box=document.getElementById("showbox");
        var play=document.getElementById("play");
        var closing=play.getElementsByTagName("a")[0];
        input.onclick=function(){mask.style.display="block";box.style.display="block"}
        closing.onclick=function(){mask.style.display="none";box.style.display="none"}
    }
-->
</script>
</head>

<body>
<div id="mask"></div>
<div id=showbox>
    <div id="title">
        <h2 title="弹出层">弹出层</h2>
        <!--预留空位放缩小放大按钮-->
        <div id="play"><a class="close" href="javascript:;" title="close"></a></div></span>
    </div>
    <div id="message">
        这是一个弹出层<br />
        如果需要确定按钮可以自由添加（效果带有close的功能然后加上ajax）<br />
        弹出的信息自定义样式自定义<br />
    </div>
</div>
<input type="button" value="it's show button" />
</body>
</html>

非常简单，属于入门级别的，有了这个思路就能实现的！ 

先建立一个遮罩层（mask），样式要是覆盖整个页面的，也就是100%高度宽度；

然后再建立一个属于你自己的DIY的弹出层（showbox）样式，再用js控制它的display就能实现弹出层了；

下次更新第二个版本，实现弹出层的可以拖动；

posted @ 2012-02-26 22:21  Jmarry  阅读(430)  评论(0)  编辑  收藏  举报