弹窗开启以及关闭(“closest”用法)

代码中关键的一个用法就是closest的用法。我的理解就是“过滤”,当我我们点击屏幕中黑色的部分的时候,检测当前点击的是不是弹框的部分。也就是 target.closest(“#pop”).length == 0 。如果等于0的话就说明不是弹框区域的内容就触发关闭事件。


<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="jquery-1.11.3.js">script>
  <style>
      #mypop{
            display:none;
            width:100%; 
            height:100%; 
            position:fixed; 
            top:0; right:0;
            background-color: rgba(0,0,0,0.5);
            }
      #pop{ display:none;
           width:200px; 
           height:200px;
           border:1px solid red; 
           position:absolute;
           top:50%; left:50%;
           margin-top:-100px;
           margin-left:-100px;
           background-color: #fff;
          }
  style>
 head>
 <body>
        <button>打开弹出框button>
        <div id="mypop">
            <div id="pop">
                <p>点击页面中浅黑色的部分。关闭弹窗p>
            div>
        div>
 body>
 <script>
    $("button").click(function(){
        $("#mypop").fadeIn();
        $("#pop").slideDown();
    })
    $("#mypop").click(function(e){
        var target = $(e.target);
        if( target.closest("#pop").length == 0){
            $("#pop").slideUp();
            $("#mypop").fadeOut();
        }


    })
 script>
html>

你可能感兴趣的:(弹窗,JQuery)