Summary: a simple div popup/box with jquery
<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "editplus®" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title>jquery-pop-up window/frame </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);d Isplay: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>
<body>
<div id= "Div0_j5" ></div>
<div id= "Div1_j5" ></div>
<button id= "bt_j5" > Bullet box </button>
</body>
Operation Result:
2016--4-28 jquery-Pop-up window/box