Bootstrap模态框插件

不念不忘少年蓝@ 2022-08-23 09:54 324阅读 0赞

1.基本模态框  
模态框（Model）是覆盖在父窗体上的子窗体，通常是显示一个单独的源的内容。  
用法：切换模态框插件隐藏内容

1.通过data属性：在控制器元素上设置属性data-toggle="modal",同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框
    2.通过javascript：$('identifier').modal(options)

模态框效果图：  
![这里写图片描述][20160613143014385]

<h2>模态框例子</h2>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始模态框（按钮触发） </button>
    <div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"> × </button>
          <h4 class="modal-title" id="myModalLabel"> 模态框的标题 </h4>
        </div>
        
        <div class="modal-body"> 模态框的主体部分 </div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">提交更改</button>
        </div>
        
      </div>
    </div>

**代码分析：**  
模态窗口需要某种触发器，按钮或者链接。  
data-target=”\#myModal”是页面上加载模态框的目标，用来触发特定的模态框。

.modal 用来把<div>的内容识别为模态框，
    .fade当模态框切换时，会引起内容淡入淡出
     aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止
     data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

2.选项和方法

//选项
    backdrop:指定一个静态背景，当用户点击模态框外部时不会关闭模态框
    keyboard:当按下esc时关闭模态框，设置为false时则按键无效
    show:当初始化时显示模态框
    remote:为模态框的主体注入内容。如果添加了一个带有有效URL的href,则会加载其中的内容

//方法
    .modal(options) 内容作为模态框激活，接受一个可选的选项对象
    .modal('toggle')手动切换模态框
    .modal('show')手动打开模态框
    .modal('hide')手动隐藏模态框

//实现键盘的esc键可以控制退出
    <script> $(function () { $('#myModal').modal({ keyboard: true })}); </script>

3.事件  
show.bs.modal:调用show方法后触发  
shown.bs.modal:当模态框对用户可见时触发  
hide.bs.modal 当调用hide实例方法时触发  
.hidden.bs.modal当模态框完全对用户隐藏式触发

//点击模态框关闭按钮时弹出另一个对话框
    <script> $(function () { $('#myModal').modal('hide')})}); </script>
    <script> $(function () { $('#myModal').on('hide.bs.modal', function () { alert('嘿，我听说您喜欢模态框...');}) }); </script>

[20160613143014385]: /images/20220721/4aac3c50f4b344afbd1266c08f7e7023.png