bootstrap modal 相关问题集锦!

Q:Modal 点击后仅显示黑色半透背景 而modalbody 主题在其背面?
  1. 源文件库是否与API 一致
  2. 插件加载过多 冲突
  3. JQ版本过低??(本人未作验证 真实性有待考究)

Q:modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明 只是是英文的 而且bootcss也未能详细的翻译该节点
实现方法
方法1
$('#myModal').modal({
keyboard: false;//禁用键盘ESC 关闭
backdrop: false;//禁用非modal外半透背景点击关闭
})
方法2
data-backdrop="false"(html5 data 调用)


Q:在Modal中使用datepicker 错位?(该章节由 戏子 提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:
container
String. Default: “body”
Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)
示例如下:
html
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group" style="position:relative;">
<label for="exampleInputEmail1">Datetimepicker</label>
<input type="text" class="form-control" id="datetimepicker">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
js
    $(function() {
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
container : '#myModal .form-group'
});
});

0 个评论

要回复文章请先登录注册