引导 3 个子模态
Bootstrap 3 submodals?
我已经看到一个有效的 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>
如果你不嵌套模态和子模态的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 -->
我是作者。Bootstrap Submodal 现在仅适用于 3.x 版本的引导程序。希望您喜欢使用它,对不起,这是一个迟到的回复!
我用它来控制模态的"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
相关文章:
- 引导:仅更改特定模态的模态背景不透明度
- 如何在引导程序 3 中贡献模态主体
- Twitter 引导 - 点击时专注于模态内的文本区域
- ui引导Angular模态解析和Scope值
- 回调函数在引导模态上调用两次甚至更多次
- 如何在引导模态 asp.net MVC 中使用编辑
- AngularJS 引导模态结果而不关闭
- 引导模态在单击其正文时会触发其他模态
- 显示模态时未触发 Twitter 引导模态事件
- 带有黑色禁用背景的引导模态显示
- 模态中模态的关闭问题 - 引导
- 引导多个模态关闭所有与最后一个模态
- 从模态引导模态不显示
- 信息窗口上的自定义按钮(如模态引导按钮)
- 在codeigniter中编辑模态引导表单
- 模态引导用户确认
- 关于模态引导的建议
- 我如何处理打开多个模态引导窗口
- PHP脚本mailer模态引导
- 警告显示两次模态引导