标签：
简介：通过JQuery实现简单的DIV弹窗/框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JQuery-弹窗/框</title>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
body{margin:0;}
#div0_J5{width:300px;height:300px;border:0px solid red;z-index:30;position:fixed;top:100px;left:500px;display:none;background:#C1C1C1;}
#close_J5{margin-left:280px;}
#div1_J5{width:100%;height:1000px;background:#010101;z-index:20;position:fixed;opacity:0.7;filter:alpha(opacity=70);display:none;}
#bt_J5{background:blue;color:#FFFFFF;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bt_J5").click(function(){
$("#div0_J5").css({‘display‘:‘block‘});
$("#div1_J5").css({‘display‘:‘block‘});
});
$("#close_J5").click(function(){
$("#div0_J5").css({‘display‘:‘none‘});
$("#div1_J5").css({‘display‘:‘none‘});
});
});
</script>
</head>
<body>
<div id="div0_J5"><img id="close_J5" src="Close.jpg"/></div>
<div id="div1_J5"></div>
<button id="bt_J5">弹框</button>
</body>
</html>
运行结果：
标签：
原文地址：http://www.cnblogs.com/liuadou/p/5441800.html
