正在从包装分区中逃离Bootstrap Modals

Question

我有一个包含tilediv的站点。在每个tilediv中有一个div，它包含该tile中显示的内容，还有一个div包含onclick触发的隐藏模态内容出于CMS的目的，模式需要包含在与tilediv内容相同的div中，但显示在整个页面上

我遇到的问题是modal无法逃脱tilediv来覆盖整个页面。它似乎卡在tilediv容器中。

我在这里创建了一个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

Answer 2

答案很简单：$('#myModal').appendTo('body');