首页 > Web开发 > 详细

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

时间:2016-04-28 11:48:20      阅读:246      评论:0      收藏:0      [点我收藏+]

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

运行结果:

技术分享

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

原文:http://www.cnblogs.com/liuadou/p/5441800.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!