码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap modal

时间:2014-09-14 23:48:48      阅读:578      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   os   ar   strong   2014   div   cti   

在此输入代码
<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <!--IE-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap Template 1</title>
        <!--bootstrap-->
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css"/>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/bootstrap/js/modal.js"></script>
        <script src="js/test.js"></script>
    </head>
    <body>
    <div class="container">
        <h1><strong>道德经原文</strong></h1>

        <h3>上篇</h3>
    </div>
    <div class="container">
        <!--<div class="container-fluid">
            <div class=""></div>
            <div class="col-md-8">
                <h4><strong>第一章</strong></h4>

                <p class="lead">
                    <small>
                        道可道,非常道。名可名,非常名。
                        <br/>
                        无名天地之始;有名万物之母。
                        <br/>
                        故常无,欲以观其妙(也作“眇”);常有,欲以观其徼(jiào)。
                        <br/>
                        此两者同出而异名,同谓之玄。
                        <br/>
                        玄之又玄,众妙之门。
                    </small>
                </p>
                <h4>
                    <strong> 第二章</strong>
                </h4>

                <p class="lead">
                    <small>
                        天下皆知美之为美,斯恶已;皆知善之为善,斯不善已。
                        <br/>
                        故有无相生,难易相成,长短相形,高下相倾,音声相和,前后相随。
                        <br/>
                        是以圣人处无为之事,行不言之教。
                        <br/>
                        万物作焉而不辞,生而不有,为而不恃,功成而弗居。夫唯弗居,是以不去。
                    </small>
                </p>
                <h4>
                   <strong>第三章</strong>
                </h4>

                <p class="lead">
                    <small>
                        不尚贤,使民不争;
                        <br/>
                        不贵难得之货,使民不为盗;
                        <br/>
                        不见可欲,使民心不乱。
                        <br/>
                        是以圣人之治:
                        <br/>
                        虚其心,实其腹;弱其志,强其骨。
                        <br/>
                        常使民无知无欲。使夫知者不敢为也。
                        <br/>
                        为无为,则无不治。
                    </small>
                </p>
            </div>
            <div class="col-md-4"></div>
        </div>-->


        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" id="model1">
                    <div class="modal-header">
                        <button type="button" class="close clo" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        One fine body&hellip;
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="saveBtn" type="button" class="btn btn-primary save">Save changes</button>
                    </div>
                </div>
                <div class="modal-content" id="model2">
                    <div class="modal-header">
                        <button type="button" class="close clo" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabe2">Modal title22222222222</h4>
                    </div>
                    <div class="modal-body">
                        One fine body2222222222222222222&hellip;
                    </div><div class="modal-body">
                        One fine body2222222222222222222&hellip;
                    </div><div class="modal-body">
                        One fine body2222222222222222222&hellip;
                    </div><div class="modal-body">
                        One fine body2222222222222222222&hellip;
                    </div><div class="modal-body">
                        One fine body2222222222222222222&hellip;
                    </div><div class="modal-body">
                        One fine body2222222222222222222&hellip;
                    </div><div class="modal-body">
                        One fine body2222222222222222222&hellip;
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default clo" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary save">Save changes</button>
                    </div>
                </div>
            </div>
        </div>




    </div>
    </body>
    </html>

    /**
     * Created by Zen on 2014/9/13.
     */
    $(function () {
        $(document).on(‘contextmenu‘,function(){
        });
        modelBox.init();

    });
    var modelBox={
        init:function(){
            $(‘#model2‘).hide();
            $(‘.save‘).on(‘click‘, function (){
    //          modelBox.showByTurn();
                modelBox.slideByTurn();
            });
            $(‘.clo‘).on(‘click‘, function (){
                modelBox.showByTurn();
            });
        },
        showByTurn:function(){
            $(‘.modal-content‘).toggle();
        },
        slideByTurn:function(){
            $(‘.modal-content‘).slideToggle();

        }
    }

    var checkbox = {
        selectAll:function () {
            $(‘#select_all‘).change(function () {
                var checkboxes = $(this).closest(‘div‘).find(‘:checkbox‘).not($(this));
                checkboxes.prop(‘checked‘, this.checked);
            });
        }
    }

bootstrap modal

标签:style   http   io   os   ar   strong   2014   div   cti   

原文地址:http://my.oschina.net/sudojs/blog/313470

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!