Chinaunix首页 | 论坛 | 博客
  • 博客访问: 569551
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: jQuery

2016-09-08 21:37:13



点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>弹出层效果</title>
  6.         <link rel="stylesheet" type="text/css" href="css/1.css"/>
  7.     
  8.         <!--<script type="text/javascript"src="js/jquery.color.js"></script>-->
  9.         <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  10.         <script type="text/javascript" src="js/1.js"></script>
  11.         
  12.     </head>
  13.     <body>
  14.         <button> Click Me</button>
  15.         <div id="fugai">
  16.             <div id="hei"></div>
  17.         </div>
  18.     </body>
  19. </html>

点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     $("button").click(function(){
  4.         $("#fugai").show();
  5.         $("#hei").show();
  6.     })
  7.     
  8.     $("#fugai").click(function(){
  9.         $("#fugai").hide();
  10.         $("#hei").hide();
  11.     })
  12.     
  13.     
  14.     
  15. }


点击(此处)折叠或打开

  1. *{
  2.     margin:0;
  3.     padding: 0;
  4.     font-family: "微软雅黑";
  5. }
  6. #hei{
  7.     width: 500px;
  8.     height: 500px;
  9.     background: white;
  10.     position: absolute;
  11.     left: 600px;
  12.     top: 200px;
  13.     z-index: 1002px;
  14.     display:none;
  15.     
  16.     
  17. }
  18. #fugai{
  19.     display: none;
  20.     position: absolute;
  21.     top: 0%;
  22.     left: 0%;
  23.     width: 100%;
  24.     height: 100%;
  25.     background-color: black;
  26.     z-index: 1001;
  27.     -moz-opacity: 0.8;
  28.     opacity: 0.50;
  29.     filter: alpha(opacity=80);
  30. }

点击 ClickMe 出现  点击fugai以内的地方消失进行循环
阅读(284) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册