bootstrap源码学习与示例：bootstrap-modal模态对话框
bootstrap-modal译为模态对话框，也就是带遮罩层的对话框。
从它的源码实现来看有点罗索。
它的HTML结构分三分部，首部，内容区，底层，底部放按钮或分页栏。
<div class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div></div> |
总是觉得这样成本太大了，用户只知道他要填空的数据就行，HTML怎么样也没所谓。jQuery ui也犯了这毛病。
<!DOCTYPE html>
<html>
<head>
<title>bootstrap学习 by 司徒正美</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://files.cnblogs.com/rubylouvre/bootstrap.css"/>
<script src="https://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script>
<script src="https://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script>
<script src="https://files.cnblogs.com/rubylouvre/bootstrap-modal.js"></script>
<script src="https://files.cnblogs.com/rubylouvre/bootstrap-button.js"></script>
<script>
$(function(){
$("#static").modal();
$('#myModal').on('show', function () {
alert("show")
})
$('#myModal').on('shown', function () {
alert("shown")
})
$('#myModal').on('hide', function () {
alert("hide")
})
$('#myModal').on('hidden', function () {
alert("hidden")
})
})
</script>
</head>
<body>
<p>静态</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<div id="static" class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
<p>动态</p>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>弹出层…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</body>
</html>
