JS弹出层
 
弹出层的基本原理是就是通过事件触发一个DIV的显示与隐藏,模拟窗口的打开与关闭。
 
下面是一个简单的实现:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                        $("a").click(function(){
                                $("#mydiv").show();
                        });
                        $("span").click(function(){
                                $("#mydiv").hide();
                        });
                });
        </script>
        <style type="text/css">
                #mydiv{
                        width:200px;height:200px;border:1px solid #000000;display: none;
                }
                #mydiv h5{ height: 30px;line-height: 30px;font-size:14px;background-color:#316AC5; margin-top: 0px}
                #mydiv h5 span{float:right;padding-right:10px;}
                #mydiv p{padding: 10px}
        </style>
</head>
<body>

<a href="#">弹出层</a>
<div id="mydiv">
        <h5>弹出层标题<span>关闭</span></h5>
        <p>弹出层内容:这是一个弹出层</p>
</div>
</body>
</html>