bootstrap源码学习与示例:bootstrap-modal模态对话框
bootstrap-modal译为模态对话框,也就是带遮罩层的对话框。
从它的源码实现来看有点罗索。
它的HTML结构分三分部,首部,内容区,底层,底部放按钮或分页栏。
|
总是觉得这样成本太大了,用户只知道他要填空的数据就行,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" > <div class="modal" > <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 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 >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>