Карусель внутри Bootstrap modal в половине колонки

Question

Как добавить карусель в модальную половину столбца.

Я использую Bootstrap modal carousel расширения JavaScript и CSS для Twitter Boostrap. Но мне нужно сделать карусель в половине столбца модального тела.

, как это, я вижу 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

это будет клонировать карусель со страницы, а затем вставьте его в левую часть. Затем, когда модальный закроется, он удалит его из правой части.