点击弹出层外区域关闭弹出层jquery特效示例

  点击弹出层外区域关闭弹出层jquery特效,废话不说,上代码,简洁明了:

  

复制代码 代码如下:

  <html>

  <head>

  <style>

  .hide{display:none;}

  .con{width:500px;height:300px;background:#000;}

  </style>

  <title>点击弹出层 ,点击弹出层外区域关闭弹出层jquery特效</title>

  <script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>

  <script type="text/javascript">

  $(document).ready(function() {

  $("div.down").click(function(e) {

  e.stopPropagation();

  $("div.con").removeClass("hide");

  });

  $("div.con a").click(function() {

  $("div.con").addClass("hide");

  });

  $(document).click(function() {

  if (!$("div.con").hasClass("hide")) {

  $("div.con").addClass("hide");

  }

  });

  $("div.con").click(function (e) {

  e.stopPropagation();//阻止事件向上冒泡

  });

  });

  </script>

  </head>

  <body>

  <div class="down">click</div>

  <div class="con hide">show-area

  <a style="color:#fff;">关闭</a>

  </div>

  </body>

  </html>