Bootstrap 模态中的旋转木马在半列中

Question

如何将轮播添加到模态中的半列。

我使用Bootstrap modal carousel 对 Twitter Boostrap 进行 JavaScript 和 CSS 扩展。但我需要在模态体的半列中制作轮播。

这样，我看到引导模型轮播的documentation 将轮播添加到模态框只是添加data-local="#myCarousel" 它将使轮播在模态体上全屏显示。但我需要制作轮播以适合我的右栏。

<div class="modal fade modal-fullscreen force-fullscreen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Modal title</h4>
   </div>
   <div class="modal-body row">
     <div class="col-md-6">
     <!-- Another column -->
     </div>
     <div class="col-md-6">
     <!-- #MyCarousel here -->
     </div>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

如何配置我的轮播模式引导程序以在我的第二列中添加轮播？

谢谢，

Answer 1

如果您只想拥有一个全屏模式，如果是轮播，只需在半列中添加轮播结构。

这是Fiddle的小提琴

如果您想从页面中取出轮播并将其插入模态，并且它是模态的一半，您可以执行以下操作，这可能会更好，因为模态不会在后台连续运行：

<div id="myModal" class="modal fade" id="myModal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Modal title</h4>
   </div>
   <div class="modal-body row">
    <div class="left-section"></div>
    <div class="right-section"></div>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<button id="load-modal" class="btn btn-primary">Toggle Modal</button>



    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">

        <div class="item active">
          <img src="http://placehold.it/1200x440/cccccc/ffffff">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
          </div>
        </div><!-- End Item -->

         <div class="item">
          <img src="http://placehold.it/1200x440/999999/cccccc">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
          </div>
        </div><!-- End Item -->

        <div class="item">
          <img src="http://placehold.it/1200x440/dddddd/333333">
           <div class="carousel-caption">
            <h3>Headline</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
          </div>
        </div><!-- End Item -->

      </div><!-- End Carousel Inner -->

      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div><!-- End Carousel -->

然后是 CSS：

#myModal .modal-dialog{
  width: 100%;
  height: 100%;
  top: 0;
  left:0;
  padding: 0;
  margin: 0;
}
#myModal .modal-content{
  width:100%;
  height: 100%;
  border-radius: 0;
  background: #fff;
}
#myModal .modal-footer{
  position: absolute;
  bottom: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}
.left-section{
  width: 50%;
  float: left;
}
.right-section{
  width: 50%;
  float: right;
}

还有 Jquery：

$(document).on('hidden.bs.modal', function (e) {
    var target = $(e.target);
    target.removeData('bs.modal')
    .find(".right-section").html('');
});
$( document ).on( "click", "#load-modal", function(e) {
    var content = $('#myCarousel').clone(true);
    $("#myModal .right-section").html(content);
    $("#myModal").modal();
});

这是Fiddle的小提琴

这将从页面克隆轮播，然后将其插入左侧部分。然后当模态关闭时，它会将其从右侧部分中删除。