1

動作している Twitter ブートストラップ サブモーダル プラグインが古いバージョンのブートストラップで動作することを確認しましたが、作成者によって v3 に更新されていないようです。

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

3 に答える 3

5

モーダルとサブモーダルの html 構造をネストしない場合、追加のコードは必要ないようです。例: 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-06T08:30:49.020 に答える
0

これを使用して、モーダルの「z-index」とボディの「modal-open」クラスを制御しています。

注意: モーダル内にサブモーダル 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-25T03:53:43.930 に答える