javascript - 单击弹出窗口外的任意位置关闭弹出窗口

Question

我能够成功添加一个在页面加载时自动加载的弹出窗口:

//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
  //select the POPUP FRAME and show it
  $("#popup").hide().fadeIn(1000);

  //close the POPUP if the button with id="close" is clicked
  $("#close").on("click", function (e) {
    e.preventDefault();
    $("#popup").fadeOut(1000);
  });
});

/*we need to style the popup with CSS so it is placed as a popup does*/
#popup {
  display:none;
  position:absolute;
  margin:0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px 2px #000;
}

body {
  background:url('http://i.imgur.com/kO2Ffje.png?1') center top;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- let's call the following div as the POPUP FRAME -->
<div id="popup" class="popup panel panel-primary">

  <!-- and here comes the image -->
  <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">

  <!-- Now this is the button which closes the popup-->
  <div class="panel-footer">
    <button id="close" class="btn btn-lg btn-primary">Close button</button>
  </div>

  <!-- and finally we close the POPUP FRAME-->
  <!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>

(根据 How do I make an image automatically popup on my main page when someone goes to it? 的说明)，

但是我不想通过单击按钮来关闭弹出窗口，而是想知道如何修改 javascript，以便在您单击它以外的任何地方时它会关闭。

Answer 1

您只需要添加一个 div(例如 .mask)，它会位于弹出窗口下方。 (你可以添加不透明的背景，只是为了效果)。

如果您点击它(或按钮)隐藏弹出窗口。

//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
  //select the POPUP FRAME and show it
  $("#popup,.mask").hide().fadeIn(1000);

  //close the POPUP if the button with id="close" is clicked
  $("#close,.mask").on("click", function (e) {
    e.preventDefault();
    $("#popup,.mask").fadeOut(1000);
  });
});

/*we need to style the popup with CSS so it is placed as a popup does*/
#popup {
  display:none;
  position:absolute;
  margin:0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px 2px #000;
}

body {
  background:url('http://i.imgur.com/kO2Ffje.png?1') center top;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.mask {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- let's call the following div as the POPUP FRAME -->
<div id="popup" class="popup panel panel-primary">

  <!-- and here comes the image -->
  <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">

  <!-- Now this is the button which closes the popup-->
  <div class="panel-footer">
    <button id="close" class="btn btn-lg btn-primary">Close button</button>
  </div>

  <!-- and finally we close the POPUP FRAME-->
  <!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>
<div class="mask"></div>