模态框

                 模态框

来源于: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');

模态框是做项目的时候经常要用到的,它的作用是很大的,模态框是可以装许多的,可以是数据表格可以是其它的内容啊?

 模态框也有许多的种类这里面的种类是可以选择任何的一种的模态框来选择你所需要的一种模态框来装载你所需要的布局的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值