zoukankan      html  css  js  c++  java
  • bootstrap弹出模态框

    (1)引入jquery, bootstrap相关的

    jquery下载地址:

    https://jquery.com/download/

    bootstrap下载地址:

    https://v3.bootcss.com/getting-started/#download

    然后在head中引入:

    <link rel="stylesheet" href="./lib/bootstrap-4.0.0/dist/css/bootstrap.min.css" type="text/css" />
    <script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./lib/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>

    (2)写一个案例:

    <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        add body content here
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    在modal-dialog 后面添加样式:class="modal-dialog modal-lg"可以调整

    (3)整合后:

    <html>
    <head>
        <link rel="stylesheet" href="./lib/bootstrap-4.0.0/dist/css/bootstrap.min.css" type="text/css" />
        <script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="./lib/bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="test">
        <button id="button" class="btn btn-default" style="margin-left: 100px; margin-top: 100px;">click me to show</button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        add body content here
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
           $("#button").click(function () {
                $('#exampleModal').modal('show');
           });
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    ZeroMQ接口函数之 :zmq_msg_move
    ZeroMQ接口函数之 :zmq_msg_init_size
    Missing artifact org.hibernate:hibernate-core:jar:4.3.0.Final
    ezmorph将一种对象转换成另外一种对象
    Avalon Framework
    easymock单元测试跟踪工具
    pngencoder图像转换jar
    Lucene全文检索引擎
    cxf怎样提高webservice性能,及访问速度调优
    待整理-20180625
  • 原文地址:https://www.cnblogs.com/chenmz1995/p/10224048.html
Copyright © 2011-2022 走看看