JS弹出层

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>

补充：web前端 , JavaScript ,