javascript - 防止灯箱内部div被关闭

Question

我正在制作一个在页面准备就绪时运行的简单灯箱。

但是，我想在灯箱内实现一个表单，这样如果用户点击较暗的部分(或关闭按钮)，表单就会消失，但如果他点击白色部分(包裹表单)内的任何部分, 它防止被关闭。

目前我有以下内容:

$(document).ready(function() {
  // lightbox
  $('.widget').fadeIn(2000);
  $('.lightbox').click(function(e) {
    $(this).fadeOut();
  })
});

body {
  background-color: yellow;
  color: #fff;
}
.lightbox {
  display: table;
  position: fixed;
  overflow: hidden;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(88, 73, 81, 0.85);
}
.widget-wrap {
  display: table-cell;
  vertical-align: middle;
  margin: auto;
  width: 300px;
  min-height: 300px;
}
.widget {
  display: none;
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="lightbox">
  <div class="widget-wrap">
    <div class="widget">
      <input type="text" placeholder="sample">
      <button>Subscribe</button>
    </div>
  </div>
</div>

Answer 1

您可以在 .widget 的事件处理程序中使用 return false。该事件不会冒泡到父元素，即 .lightbox 并且 lightbox 不会关闭。

$(document).ready(function() {
  // lightbox
  $('.widget').fadeIn(2000);
  $('.lightbox').click(function(e) {
    $(this).fadeOut();
  });

  // For preventing the bubbling of the event to the .widget event handler
  $('.widget').on('click', function() {
    return false;
  });
});

body {
  background-color: yellow;
  color: #fff;
}
.lightbox {
  display: table;
  position: fixed;
  overflow: hidden;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(88, 73, 81, 0.85);
}
.widget-wrap {
  display: table-cell;
  vertical-align: middle;
  margin: auto;
  width: 300px;
  min-height: 300px;
}
.widget {
  display: none;
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="lightbox">
  <div class="widget-wrap">
    <div class="widget">
      <input type="text" placeholder="sample">
      <button>Subscribe</button>
    </div>
  </div>
</div>