zoukankan      html  css  js  c++  java
  • BootStrap 模态框基本用法

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 模态框(Modal)插件方法</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <h2>模态框(Modal)插件方法</h2>
    
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       开始演示模态框
    </button>
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                   aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                   模态框(Modal)标题
                </h4>
             </div>
             <div class="modal-body">
                按下 ESC 按钮退出。
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" 
                   data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                   提交更改
                </button>
             </div>
          </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
       $(function () { $('#myModal').modal({
          keyboard: true
       })});
    </script>
    
    </body>
    </html>
    

      BootStrap 模态框的使用方法。

    Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。
    $('#identifier').modal({
    keyboard: false
    })
    
    Toggle: .modal('toggle') 手动切换模态框。
    $('#identifier').modal('toggle')
    
    Show: .modal('show') 手动打开模态框。
    $('#identifier').modal('show')
    
    Hide: .modal('hide') 手动隐藏模态框。
    $('#identifier').modal('hide')
    

    选项

    有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

    选项名称类型/默认值Data 属性名称描述
    backdrop boolean 或 string 'static'
    默认值:true
    data-backdrop 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。
    keyboard boolean
    默认值:true
    data-keyboard 当按下 escape 键时关闭模态框,设置为 false 时则按键无效。
    show boolean
    默认值:true
    data-show 当初始化时显示模态框。
    remote path
    默认值:false
    data-remote 使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。如下面的实例所示:
    <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>
  • 相关阅读:
    关于链表
    Linux操作系统(3):crond 任务调度
    高速信号的确定
    python 多线程 QTimer定时自动重复执行某个函数,QSS应用
    使用qtawesome这个第三方库来实现按钮中的Font Awesome字体图标的显示,叠层显示,多窗口显示,窗口禁止缩放,最大化,tap widget使用,按键颜色,建立相关文件路径,点击主窗口退出程序
    IP,子网掩码,网关,DNS的关系解析
    ZLAN6042使用源码(modbus-tcp)
    模块cv2的用法
    python(如何将数据写入本地txt文本文件)
    你猜我猜的经验-电源
  • 原文地址:https://www.cnblogs.com/yougmi/p/4262207.html
Copyright © 2011-2022 走看看