1

Я видел, что работающий субмагматический плагин twitter bootstrap работает для более старых версий bootstrap, но он не обновляется до версии v3 автором.Bootstrap 3 подмодели?

Я изменил разметку для выравнивания с v3, но похоже, что CSS/JS нуждается в дополнительном «взломе». Кто-нибудь нашел обходной путь этого или другого плагина, который позволяет использовать эту функцию, которую они могут использовать? ценится

GitHub https://github.com/jakiestfu/Bootstrap-SubModal

Fiddle: http://jsfiddle.net/chou_one/eS7us/3/

<!-- Sub-Modal --> 
<div id="mySubModal" class="modal sub-modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
     <p class="center">Are you sure you want to close your account?<br />You won't be able to undo this.</p> 
     <hr /> 
     <form class="form-horizontal" role="form"> 
      <div class="form-group"> 
      <label for="inputEmail1" class="col-lg-2 control-label">Email</label> 
      <div class="col-lg-10"> 
       <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="inputPassword1" class="col-lg-2 control-label">Password</label> 
      <div class="col-lg-10"> 
       <input type="password" class="form-control" id="inputPassword1" placeholder="Password"> 
      </div> 
      </div> 
     </form>    
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" data-dismiss="submodal" aria-hidden="true">Cancel</button> 
     <button class="btn btn-danger" data-dismiss="submodal">Close Account</button> 
    </div> 
</div> 

ответ

5

Если вы не гнездятся HTML-структуры вашего модальный и submodal кажется вам не нужен никакой дополнительный код. Пример: http://bootply.com/85842

<div class="container"> 
<div class="row"> 
<!-- Button trigger modal --> 
    <a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> 
</div> 
</div> 
    <!-- Modal --> 
    <div class="modal fade" 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"> 

<a data-toggle="modal" data-target="#mysubModal" class="btn btn-primary btn-lg">Launch demo modal</a> 






     </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 --> 

<div class="modal fade" id="mysubModal" 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"> 

     </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 --> 
+1

вау это разбирает мою проблему. Я все время гнездился внутри родительского модала, и он его ломал! Спасибо @Bass –

+0

Хотелось бы, чтобы я мог каждый раз набирать обороты. – isherwood

1

Я автор. Bootstrap Submodal теперь доступен только для версий bootstrap 3.x. Надеюсь, вам понравилось использовать его, извините, это поздний ответ!

0

Я использую это для управления «z-index» для модального и «модально-открытого» класса для тела.

ВНИМАНИЕ: не добавляйте подмодальный html-код внутри модального.

$ -> 
 
    $('.modal').on 'show.bs.modal', -> 
 
    $('.modal.in').css('zIndex', 0) 
 

 
    $('.modal').on 'hidden.bs.modal', -> 
 
    $('.modal.in').css('zIndex', '') 
 
    setTimeout (-> 
 
     if $('.modal.in').length 
 
     // it seems it will remove the modal-open after 'hidden.bs.modal', so add a setTimeout 
 
     $('body').addClass('modal-open') 
 
    ), 500

Смежные вопросы