Bootstrap 模态框是一个轻量级的多用途 JavaScript 弹出窗口, 可自定义和响应式. 可以使用它在网站中显示警告窗口, 视频和图片. 使用 Bootstrap 构建的网站可以使用模态框来显示条款和条件(作为注册过程的一部分), 视频, 甚至社交媒体小部件.
Bootstrap 模态框可以用来创建模态窗口丰富用户体验, 或者为用户添加实用功能. 您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件).
为了可以更好地理解它, 我们来看一下 Bootstrap 模态框的各个组成部分.
Bootstrap 模态框主要分为三个部分: 头部 (header), 正文(body) 和页脚(footer). 每个部分都有自己的意义, 因此我们应该正确的使用它们. 我们稍后将讨论这些. Bootstrap 模态框最令人兴奋的是什么? 你不需要写任何 JavaScript 代码就可以使用它! 所有的代码和样式都是由 Bootstrap 预定义的. 你所需要做的只是使用正确的标记和属性来触发它.
默认的模态框
默认的模态框如下所示:
要触发模态框, 你需要添加链接或者按钮. 触发元素的标记可能如下所示:
- <a href="#" class="btn btn-lg btn-success"
- data-toggle="modal"
- data-target="#basicModal">Click to open Modal</a>
请注意, link 元素有两个自定义数据属性: data-toggle 和 data-target.toggle 告诉 Bootstrap 要做什么, target 告诉 Bootstrap 要打开哪个元素. 所以每当点击这样的链接时, 都会出现一个 id 为 "basicModal" 的模态框.
现在让我们看看定义模态框所需的代码:
- <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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 title</h4>
- </div>
- <div class="modal-body">
- <h3>Modal Body</h3>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
- </div>
- </div>
- </div>
- </div>
模态框的父 div 应具有与上述触发元素中使用的相同的 ID. 在我们的例子中是 id="basicModal".
注意: 父模态框元素中自定义属性 aria-labelledby 和 aria-hidden 让其可被访问. 让所有人都能访问你的网站是一个很好的做法, 所以你应该使用这些属性, 因为它们不会对模态框的普通功能产生负面影响.
在模态框的 html 代码中, 我们可以看到一个封装 div 嵌套在父模态框 div 内. 这个 div 的类 modal-content 告诉 Bootstrap.JS 在哪里查找模态框的内容. 在这个 div 内, 我们需要放置前面提到的三个部分: 头部, 正文和页脚.
模态框头部, 顾名思义, 用于给模态添加一个标题或者如 "x" 关闭按钮等其他元素. 这些元素还应该有一个 data-dismiss 属性告诉 Bootstrap 哪个元素要隐藏.
然后我们看一下模态框的正文. 可以把它看做一个打开的画布, 你可以在其中添加任何类型的数据, 包括嵌入 YouTube 视频, 图像或者任何其他内容.
最后, 我们看一下模态框的页脚. 该区域默认为右对齐. 在这个区域, 你可以放置 "保存","关闭","接受" 等操作按钮, 这些按钮与 "模态框" 需要表现的行为相关联.
现在我们完成了我们的第一个模态框! 你可以在我们的演示页面 (https://codepen.io/SitePoint/pen/KkHyw) 上查看.
改变模态框的大小
之前我提到 Bootstrap 模态框是响应式的, 灵活的. 我们将在本节中看到如何更改其大小.
Bootstrap 3.3.7 中模态框有两种新的风格: 大和小. 给 divmodal-dialogdiv 添加一个修饰符类 modal-lg 可以获得一个更大的模态框, 添加 modal-sm 可以获得一个更小的模态框.
使用 jQuery 激活模态框
模态框是一个 jQuery 插件, 所以如果你想使用 jQuery 控制模态框的话, 你需要在模态框的选择器上调用. modal()方法. 例如:
$('#basicModal').modal(options);
这里的 "options" 是可以传递给自定义行为的 JavaScript 对象. 例如:
- var options = {
- "backdrop" : "static"
- }
可用的 option 包括:
backdrop: 这可以是 true 或 static. 这定义你是否希望用户能够通过单击背景来关闭模态.
keyboard: 如果设置为 true 则模态框将通过 ESC 键关闭.
show: 用于打开和关闭模态框. 它可以是 true 或 false.
remote: 这是最炫酷的选择之一. 它可以用于使用 jQuery 的 load()方法加载远程内容. 你需要在此选项中指定外部页面. 默认设置为 false.
Bootstrap 模态框的事件
你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义 Bootstrap 模态的普通行为. 这些事件必须使用 jQuery 的. on()方法绑定.
可用的事件有:
show.bs.modal: 在模态框打开之前被触发.
shown.bs.modal: 在显示模态框后触发.
hide.bs.modal: 在模态框被隐藏之前触发.
hidden.bs.modal: 在模态关闭后触发.
loaded.bs.modal: 使用上述的 remote 选项在远程内容成功加载到模态框的内容区域时触发.
你可以像这样使用上述之一的事件:
- $('#basicModal').on('shown.bs.modal', function (e) {
- alert('Modal is successfully shown!');
- });
在模态框中加载远程内容
在 Bootstrap 模式中加载远程内容有三种不同的方法.
第一种方法, 如上所述, 是使用对象 options 中的 remote 选项. 其他两种方式都是没有 JavaScript 的, 如下所示.
你可以为模态框的触发元素中的 href 属性提供一个值. 在我们的例子中, 触发器是一个链接. 例如, 我们可以不使用我们之前提到的值 #而将 URL 包含在特定页面中:
- <a class="btn btn-lg btn-default"
- data-toggle="modal"
- data-target="#largeModal"
- href="remote-page.html">Click to open Modal</a>
你还可以为触发元素提供 data-remote 的自定义数据属性, 而不是使用 href 属性. 例如:
- <a class="btn btn-lg btn-default" data-toggle="modal"
- data-target="#largeModal"
- data-remote="remote-page.html">Click to open Modal</a>
结论
模态框是 Bootstrap 3 提供的最好的插件之一. 对于初级设计师来说, 它是不需要任何 JavaScript 代码而在弹出式画面中加载内容的最佳方式之一.
更多 Bootstrap 的相关知识, 可访问: web 前端自学 https://www.html.cn/ !!
来源: http://www.css88.com/framework/bootstrap/18013.html