本文详细介绍了如何使用Bootstrap创建模态框，包括HTML结构、触发方式及JavaScript事件的应用。通过一个具体的示例，展示了模态框的基本配置及其交互效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模态框</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--按钮触发模态框-->
<button class="btn btn-primary btn-lg" data-toggle ="modal" data-target="#myModal">
演示模态框
</button>
<!--模态框-->
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
<!--
1.modal，用来把 <div> 的内容识别为模态框。
2.fade class。当模态框被切换时，它会引起内容淡入淡出。
3.属性 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">模态框（Modal）标题</h4>
</div>
<div class="modal-body">neirongnkjfdlskjl</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!--modal-content-->
</div><!--modal-dialog-->
</div>
<script>
$(document).ready(function(){
$('#myModal').on('hide.bs.modal',
function() {
alert('嘿，我听说您喜欢模态框...');
})
})
</script>
</body>
</html>
如果您点击了 关闭 按钮，即 hide 事件，则会显示一个警告消息。
| hide.bs.modal | 当调用 hide 实例方法时触发。 |
$('#myModal') 模态框ID
扫一扫
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
