jquery - 从包装 div 中转义 Bootstrap 模态

Question

我有一个包含 tile-divs 的站点。在每个 tile-div 中都有一个包含在该 tile 中显示的内容的 div 和一个包含在单击时触发的隐藏模式内容的 div。 出于 CMS 的目的，模态框需要包含在与 tile-div 内容相同的 div 中，但要显示在整个页面上。

我遇到的问题是模式无法转义 tile-div 以覆盖整个页面。它似乎卡在 tile-div 容器中。

我在这里创建了一个 bootply 示例:http://www.bootply.com/wtIPZuNXKY

HTML:

<div class="nopadding carousel-row">
  <div class="carousel-row-inner">

    <div class="gallery-cell" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
      <div class="cell-details">
        <div class="cell-title">
          <h3>Cell title</h3>
          <p>Suspendisse vel.</p>
        </div>
      </div>

    <!--gallery-cell-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="exampleModalLabel">New message</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">Message:</label>
                <textarea class="form-control" id="message-text"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
          </div>
        </div>
      </div>
    </div>

          </div>
    <!--tile-->

  </div>
</div>

CSS

.carousel-row {
  overflow: hidden;
  position: absolute;
  top: 100px;
  width: 100vw;
  min-width: 100%;
  z-index: 666;
}
.carousel-row-inner {
  font-size: 0;
  height: auto;
  margin: 40px auto;
  overflow: visible;
  padding-bottom: 10px;
  position: relative;
  -webkit-transition: 450ms -webkit-transform;
  transition: 450ms transform;
  white-space: nowrap;
  width: 100vw;
  min-width: 100%;
  box-sizing: border-box;
}

.gallery-cell {
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  height: 200px;
  margin-right: 20px;
  position: relative;
  -webkit-transition: 450ms all;
  transition: 450ms all;
  -webkit-transform-origin: center left;
  -ms-transform-origin: center left;
  transform-origin: center left;
  width: 242px;
  overflow-x: visible;
  background-color:#ccc;
}

JS

$('.gallery-cell').on('click', function(e) {
  $('#myModal').modal('hide');
  $('#myModal').addClass('out');
});

感谢任何帮助。

Answer 1

检查以下是 Bootply URL

    $('.gallery-cell').on('click', function(e) {
      $('#myModal').modal('hide');
      $('#myModal').addClass('out');
    });

.carousel-row {
  overflow: hidden;
  position: absolute;
  top: 100px;
  width: 100vw;
  min-width: 100%;
  z-index: 666;
}
.carousel-row-inner {
  font-size: 0;
  height: auto;
  margin: 40px auto;
  overflow: visible;
  padding-bottom: 10px;
  position: relative;
  -webkit-transition: 450ms -webkit-transform;
  transition: 450ms transform;
  white-space: nowrap;
  width: 100vw;
  min-width: 100%;
  box-sizing: border-box;
}

.gallery-cell {
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  height: 200px;
  margin-right: 20px;
  position: relative;
  -webkit-transition: 450ms all;
  transition: 450ms all;
  -webkit-transform-origin: center left;
  -ms-transform-origin: center left;
  transform-origin: center left;
  width: 242px;
  overflow-x: visible;
  background-color:#ccc;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

<div class="nopadding carousel-row">
  <div class="carousel-row-inner">

    <div class="gallery-cell" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
      <div class="cell-details">
        <div class="cell-title">
          <h3>Cell title</h3>
          <p>Suspendisse vel.</p>
        </div>
      </div>

    <!--gallery-cell-->

          </div>
    <!--tile-->
  </div>
</div>

http://www.bootply.com/2tzG8dK3ps