模态框
来源于:Bootstrap
弹出模态框是用HTML、CSS和Javascript构建的,它们位于文档中其它表现元素之上,并从中删除滚动事件,以便模态框自身的内容能得到滚动。
点击模态框的“backdrop”(灰背景区域),将自动关闭动态模块框。
Bootstrap一次只支持一个模态窗口,不支持嵌套模式,因为我们相信那样叠加会造成用户体验不佳。
模态框使用 position: fixed,在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置,以避免其它元素干扰,尤其是当另一个固定元素中也定义了 .modal 事件时,你可能会遇到问题。
同样是受position: fixed属性影响,在在移动设备上使用模态框,有一些注意事项。有关详细信息,请参阅浏览器支持文档。
根据HTML5的语义定义, autofocus HTML 属性对 Bootstrap 模态框没有影响,要达到同样的效果,需要使用一些JavaScript:
模态框有两个可选大小,可以通过class定义.modal-dialog(分别是.bd-example-modal-lg和.bd-example-modal-sm,这些尺寸会在某些中断点调整,以避免在较小的viewport窗口上出现水平滚动条。
这是大的模态框
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
(放内容在这里面)
</div>
</div>
</div>
这是小的模态框
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
这是打开模态框的代码
function openInsert() {
//打开模态框
$("#ffmkldm").modal('show');
模态框是做项目的时候经常要用到的,它的作用是很大的,模态框是可以装许多的,可以是数据表格可以是其它的内容啊?
模态框也有许多的种类这里面的种类是可以选择任何的一种的模态框来选择你所需要的一种模态框来装载你所需要的布局的内容。