bootstrap源码学习与示例：bootstrapmodal模态对话框

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- 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>