防止灯箱内部div被关闭

Question

我制作了一个简单的灯箱，在页面准备好后运行。

但是，我想在灯箱内部实现一个表单，所以如果用户点击较暗的部分（或关闭按钮），表单就会消失，但如果他点击白色内部的任何部分（包装表单） ，它可以防止被关闭。

目前我有以下内容：

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用return false的事件处理程序中的.widget。该事件不会冒泡到父元素，即.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>