• Bootstrap中对话框插件(modal.js)
  • 发布于 2个月前
  • 316 热度
    0 评论
  • 林勇
  • 0 粉丝 38 篇博客
  •   
如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换模态框(Modal)插件的隐藏内容:

通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
$('#identifier').modal(options)


一个静态的模态窗口实例,如下面的实例所示:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 模态框(Modal)插件</title>  
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="/scripts/jquery.min.js"></script>  
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11. <h2>创建模态框(Modal)</h2>  
  12. <!-- 按钮触发模态框 -->  
  13. <button class="btn btn-primary btn-lg" data-toggle="modal"   
  14.    data-target="#myModal">  
  15.    开始演示模态框  
  16. </button>  
  17.   
  18. <!-- 模态框(Modal) -->  
  19. <div class="modal fade" id="myModal" tabindex="-1" role="dialog"   
  20.    aria-labelledby="myModalLabel" aria-hidden="true">  
  21.    <div class="modal-dialog">  
  22.       <div class="modal-content">  
  23.          <div class="modal-header">  
  24.             <button type="button" class="close"   
  25.                data-dismiss="modal" aria-hidden="true">  
  26.                   &times;  
  27.             </button>  
  28.             <h4 class="modal-title" id="myModalLabel">  
  29.                模态框(Modal)标题  
  30.             </h4>  
  31.          </div>  
  32.          <div class="modal-body">  
  33.             在这里添加一些文本  
  34.          </div>  
  35.          <div class="modal-footer">  
  36.             <button type="button" class="btn btn-default"   
  37.                data-dismiss="modal">关闭  
  38.             </button>  
  39.             <button type="button" class="btn btn-primary">  
  40.                提交更改  
  41.             </button>  
  42.          </div>  
  43.       </div><!-- /.modal-content -->  
  44. </div><!-- /.modal -->  
  45.   
  46. </body>  
  47. </html>  


代码讲解:

1.使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮

2.如果您仔细查看上面的代码,您会发现在 <button> 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。

在模态框中需要注意两点:

第一是 .modal,用来把 <div> 的内容识别为模态框。
第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。
aria-labelledby="myModalLabel",该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
<div class="modal-header">,modal-header 是为模态窗口的头部定义样式的类。
class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。
class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。
data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
用户评论