bootstrap弹出模态框

时间：2021-12-22 00:24:00

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

相关文章