Bootstrap 3子模式？

我已經看到一個工作的twitter引導子模態插件適用於舊版bootstrap，但它似乎並未被作者更新爲v3。Bootstrap 3子模式？

我確實改變了標記以符合v3，但它看起來像CSS/JS需要一些額外的「黑客」。有沒有人找到了解決方法或其他一些插件，允許他們可以共享這個功能？非常感謝

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

小提琴：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>

來源

2013-10-06 Chou One

如果不這樣做窩的模態的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 -->

來源

2013-10-06 08:30:49

哇，這整理出我的問題。我一直將它嵌入父模態中，並且它正在破壞它！謝謝@Bass –

我希望每當我偶然發現這件事時，我都可以高舉。 – isherwood

我是作者。 Bootstrap Submodal現在只用於3.x版本的引導程序。希望你喜歡使用它，對不起，這是一個遲到的迴應！

來源

2015-02-06 18:31:10

我用它來控制模態和'模態打開'類的'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

來源

2015-09-25 03:53:43

Bootstrap 3子模式？

回答

相關問題