2016-4-28 JQuery-DIV弹窗/框

简介:通过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>

运行结果:

posted @ 2016-04-28 10:55  小兵程序猿  阅读(240)  评论(0编辑  收藏  举报