bootstrap模态框

bootstrap的模态框以弹出对话框的形式出现，但是使用模态框的时候有几个注意点，

1. 模态框最好放在body下面，作为 body 标签的直接子元素，因为这样可以尽量避免其他其他组件影响模态框展现和功能。
2. 不支持打开多个模态框，同一页面，打开一个模态框之后，不支持叠加另一个模态框，如果想要同时打开多个模态框，需要自己写额外的代码来实现。

模态框包含了模态框的头、内容区域和一组放置于底部的按钮。模态框弹出时的动画效果（淡入淡出效果），可以通过添加或者删除.fade这个类来实现。

模态框的调用可以通过data属性，不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

还可以通过javascript调用。

$('#myModal').modal(options)

javascript调用的时候有可选参数，

名称	类型	默认值	描述
backdrop	boolean 或者“static”	true	点击模态框之外的区域，隐藏模态框。
keyboard	boolean	true	键盘上的 esc 键被按下时关闭模态框。
show/hide	boolean	true	模态框初始化之后就立即显示出来。
remote	path	false	如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/3042592/blog/1560888