zoukankan html css js c++ java

bootstrap弹出模态框

（1）引入jquery, bootstrap相关的

jquery下载地址：

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>

查看全文

相关阅读:
Siri
ArcSDE和Geodatabase10.1抢先版谍照介绍(3)——ArcToolbox工具和其他功能
 ‘马太’效应
 Linux琐屑下Resin JSP MySQL的布置和设置配备陈设2
平安防御：分级防御对Linux服务器的攻击
 Linux无法解析域名的处理活动
 Ubuntu Linux Server的用户僻静后果分析
 大概要领确保确保Linux体系中SSH的安适性
 无错版Vsftpd Mysql Pam设置虚拟用户要领
 Redhat Linux AS4下的LAMP与Discuz装置1

原文地址：https://www.cnblogs.com/chenmz1995/p/10224048.html