1. 弹出框的概述
弹出框(Modal)是页面上展示信息和与用户交互的重要组件之一。Bootstrap中的弹出框是基于HTML、CSS和JavaScript的。弹出框在页面中是浮现出来,覆盖在页面的顶部,其背景是半透明的,内容便于浏览,能够方便地与用户进行交互。Bootstrap的弹出框能够被用于不同的功能,例如登录框、图片显示、用户通知等。在本篇文章中我们将深入了解Bootstrap中弹出框的属性、用法及其实现方法。
2. 基本用法
在Bootstrap中,创建一个弹出框使用的最基础的代码如下所示:
<!-- 弹出框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
弹出框
</button>
<!-- 弹出框的主体 -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- 弹出框的内容 -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">弹出框标题</h4>
</div>
<div class="modal-body">
<p>对话框内容可以在这里添加。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
上面的代码中,首先我们需要定义一个按钮,点击这个按钮将会触发一个弹出框。这个按钮HTML标签包含 "data-toggle" 和 "data-target"特性。"data-toggle"特性是告诉 Bootstrap 启用弹出框的插件,而 "data-target"则是属性值为弹出框的ID,告诉Bootstrap这个按钮将要触发哪一个id的弹出框。
此外,上面代码中还有一个 "modal" 标签,其class属性是 “fade”,这意味着当弹出框被隐藏时,它们将会以淡出的方式效果。同时该标签也嵌套了一个 "modal-dialog" 标签,而模态弹出框的主体内容会在这个标签中定义。
下图展示了最基本的一个弹出框的效果:
图1. 基本弹出框效果
![基本弹出框效果](https://img-blog.csdn.net/20180816110510161?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psb2g5OTg1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/85)
3. 弹出框的大小
Bootstrap提供了三种不同大小的弹出框:
小号:.modal-sm
默认:无类名
大号:.modal-lg
下面的代码演示了如何创建一个小的弹出框:
<div class="modal-dialog modal-sm">
...
</div>
通过将带有"modal-sm" class的 "modal-dialog"标签嵌套在modal标签内,就可以创建一个小的弹出框。同样的,也可以创建一个大的弹出框:
<div class="modal-dialog modal-lg">
...
</div>
4. 弹出框的位置
通过Bootstrap,可以在页面上设置弹出框的位置来满足特定的需求。下面展示了如何设置弹出框的位置:
居中:.modal-dialog-centered
底部:.modal-bottom
下面的代码演示如何在底部显示弹出框:
<div class="modal-dialog modal-bottom">
...
</div>
5. 弹出框的触发方式
Bootstrap插件提供了三种不同的方式,其中之一是“hover”,将鼠标放置在按钮上就可以触发弹出框的显示。另一种触发方式是"focus",当按钮处于焦点状态时,按Enter键同样会触发弹出框。默认的触发方式是 "click"。
下面的代码演示了如何使用"hover"触发方式打开一个弹出框:
<button type="button" class="btn btn-default" data-toggle="modal" data-trigger="hover" data-target="#myModal">
弹出框
</button>
6. 弹出框的遮罩幕布样式
默认情况下,所有的弹出框都是有遮罩幕布的。下面演示如何修改遮罩幕布的样式:
修改背景颜色
修改透明度
我们可以使用 CSS的opacity属性来修改透明度,如下代码:
.modal-backdrop {
/* 修改透明度为0.5 */
opacity: 0.5;
/* 修改背景颜色为绿色 */
background-color: green;
}
6.1 关闭遮罩幕布
在某些情况下,我们需要移除遮罩幕布的样式,或者关闭它。Bootstrap提供了一个通过设置特定CSS的方式来关闭遮罩幕布样式的方法。可以为modal元素添加 "data-backdrop" 标记,并将其设置为 false 即可关闭弹出框的遮罩幕布。
下面的代码演示了如何关闭遮罩幕布,并且在弹出框关闭时,它将会被自动删除:
<div class="modal fade" data-backdrop="false">
<div class="modal-dialog">
...
</div>
</div>
7. 弹出框的事件
Bootstrap在弹出框插件包中提供了一些事件,可以让程序员在弹出框的生命周期中选择执行某些特定的操作。
下面是一些常用弹出框插件的事件:
show.bs.modal:当弹出框正在被显示时,将触发该事件。
shown.bs.modal:当弹出框完全显示时,将触发该事件。
hide.bs.modal:在弹出框开始隐藏时,将触发该事件。
hidden.bs.modal:在弹出框完成隐藏时,将触发该事件。
下面的代码演示了如何监听"hide.bs.modal"事件,并生成一个警告框来提示用户操作是否成功:
$(function() {
$("#myModal").on("hide.bs.modal", function() {
if (confirm("Are you sure you want to close this dialog?")) {
return true;
} else {
return false;
}
});
});
8. 总结
本文深入介绍了Bootstrap中的弹出框组件,覆盖了弹出框的属性、用法和实现方法。在实际开发过程中,开发者可以根据自己的需求来选择适用的属性和事件,完成自己需要的功能。