Bootstrap 弹出框
弹出框
Bootstrap 提供了一种简单方法来创建预定义的弹出框信息:
成功! 此弹出框可能表示执行了成功或正面的操作。
消息! 此弹出框可能表示执行了修改或中性的操作。
警告! 此弹出框可能表示一个需要关注的警告。
危险! 此弹出框可能表示执行了一个危险或潜在的负面操作。
使用 .alert 样式类以及 4 种上下文类（.alert-success, .alert-info, .alert-warning 或 .alert-danger）中的 1 种来创建弹出框:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"></head><body><div class="container"><h2>提示框</h2><div class="alert alert-success"><strong>成功!</strong> 此弹出框可能表示执行了成功或正面的操作。</div><div class="alert alert-info"><strong>消息!</strong> 此弹出框可能表示执行了修改或中性的操作。</div><div class="alert alert-warning"><strong>警告!</strong> 此弹出框可能表示一个需要关注的警告。</div><div class="alert alert-danger"><strong>危险!</strong> 此弹出框可能表示执行了一个危险或潜在的负面操作。</div></div></body></html>
弹出框链接
将 alert-link 添加到弹出框中的任意链接，以创建与其含义匹配的 "彩色链接":
成功! 您应该 阅读这个消息
消息! 您应该 阅读这个消息
警告! 您应该 阅读这个消息
危险! 您应该 阅读这个消息
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><div class="container"><h2>弹出框链接</h2><p>将 alert-link 添加到弹出框中的任意链接，以创建与其含义匹配的 "彩色链接"</p><div class="alert alert-success"><strong>成功!</strong> 您应该 <a href="#" class="alert-link">阅读这个消息</a>.</div><div class="alert alert-info"><strong>消息!</strong> 您应该 <a href="#" class="alert-link">阅读这个消息</a>.</div><div class="alert alert-warning"><strong>警告!</strong> 您应该 <a href="#" class="alert-link">阅读这个消息</a>.</div><div class="alert alert-danger"><strong>危险!</strong> 您应该 <a href="#" class="alert-link">阅读这个消息</a>.</div></div></body></html>
关闭弹出框
要关闭弹出框，要添加一个 .alert-dismissible 到 alert 容器。然后添加 class=”close” 和 data-dismiss="alert" 到一个链接或按钮（当您单击此按钮时，弹出框将消失）。
× 点击右边的 "x" 表示来关闭它
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="container"><h2>弹出框</h2><p>带有 class="close" 和 data-dismiss="alert" 的 a 元素用于关闭弹出框。</p><p>alert-dismissible 类为 close 按钮添加了一些额外的填充。</p><div class="alert alert-success alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>成功!</strong> 此弹出框可能表示执行了成功或正面的操作。</div><div class="alert alert-info alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>信息!</strong> 此弹出框可能表示执行了修改或中性的操作。</div><div class="alert alert-warning alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>警告!</strong> 此弹出框可能表示一个需要关注的警告。</div><div class="alert alert-danger alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>危险!</strong> 此弹出框可能表示执行了一个危险或潜在的负面操作。</div></div></body></html>
aria-* 属性与 × 解释为了帮助提高使用屏幕阅读器的人的可访问性，当创建关闭按钮时，您应该包含 aria-label="close" 属性。× (×) 是一个 HTML 实体字符，是关闭按钮的首选图标，而不是字母 "x"。
有关所有 HTML 实体的列表，请访问本站的 HTML 实体字符 参考。
弹出框动画
.fade 与 .in 类在关闭弹出框时添加淡出效果:
× 点击右边的 “x” 标识来关闭它。它将 “淡出”。
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="container"><h2>弹出框动画</h2><p>.fade 与 .in 类在关闭弹出框时添加淡出效果</p><div class="alert alert-success alert-dismissible fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>成功!</strong> 此弹出框可能表示执行了成功或正面的操作。</div><div class="alert alert-info alert-dismissible fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>消息!</strong> 此弹出框可能表示执行了修改或中性的操作。</div><div class="alert alert-warning alert-dismissible fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>警告!</strong> 此弹出框可能表示一个需要关注的警告。</div><div class="alert alert-danger alert-dismissible fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>危险!</strong> 此弹出框可能表示执行了一个危险或潜在的负面操作。</div></div></body></html>
完整 Bootstrap 弹出框参考
有关所有弹出框选项、方法和事件的完整参考，请访问 Bootstrap JS 弹出框参考。