必威的官网网络

当前位置:必威的官网-必威体育 > 必威的官网网络 >   BootStrap 模态框的使用方法

  BootStrap 模态框的使用方法

来源:http://www.jlqfjt.com 作者:必威的官网-必威体育 时间:2019-06-28 14:59
<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 模态框(Modal)插件方法</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <h2>模态框(Modal)插件方法</h2>    <!-- 按钮触发模态框 -->  <button  data-toggle="modal" data-target="#myModal">     开始演示模态框  </button>    <!-- 模态框(Modal) -->  <div  id="myModal" tabindex="-1" role="dialog"      aria-labelledby="myModalLabel" aria-hidden="true">     <div >        <div >           <div >              <button type="button"  data-dismiss="modal"                  aria-hidden="true">×              </button>              <h4  id="myModalLabel">                 模态框(Modal)标题              </h4>           </div>           <div >              按下 ESC 按钮退出。           </div>           <div >              <button type="button"                   data-dismiss="modal">关闭              </button>              <button type="button" >                 提交更改              </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"   data-target="#modal">请点击我</a>

本文由必威的官网-必威体育发布于必威的官网网络,转载请注明出处:  BootStrap 模态框的使用方法

关键词: betway88客户端

上一篇:bootstrap之hello world

下一篇:没有了