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>
"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>
4668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
