我已经看到可以正常工作的twitter bootstrap sub modal插件适用于较旧版本的bootstrap,但似乎作者并未将其更新到v3。
我确实更改了标记以使其与v3一致,但是CSS / JS似乎需要一些额外的“ hacking”。是否有人找到解决此问题或其他插件的变通办法,以使他们可以共享此功能?非常感激
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>
如果您不嵌套模态和子模态的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">×</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">×</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 -->
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句