Question

如何将旋转木马添加到半栏中的模态。

我使用Bootstrap modal carousel对Twitter Boostrap的JavaScript和CSS扩展。但我需要在模态体的半列中制作旋转木马。

像这样，我看到引导模型轮播的documentation将轮播添加到模态只是添加Vec3b它将在模态体上制作旋转木马全屏。但是我需要让旋转木马适合我的右栏。

data-local="#myCarousel"

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

感谢，

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

的小提琴

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

在半柱中的Bootstrap模态内的旋转木马

1 个答案: