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="http://files.cnblogs.com/rubylouvre/bootstrap.css"/> 

        <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script>

        <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script>

        <script src="http://files.cnblogs.com/rubylouvre/bootstrap-modal.js"></script>

        <script src="http://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>

你可能感兴趣的:(bootstrap)