Bootsrap 模式不显示

Question

I have a button in a navbar that when clicked should open a modal.我在导航栏中有一个按钮，点击时应该打开一个模式。 I tried following the bootstrap docs and this question: bootstrap modal not working at all我尝试遵循引导程序文档和这个问题：引导程序模式根本不起作用

Nothing works so far, and the console doesn't show any errors.到目前为止没有任何效果，并且控制台没有显示任何错误。

HTML HTML

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Legion Analytics</title>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" 
        integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body class = "bg-light">
        <nav class="navbar navbar-dark bg-dark">
            <span class="navbar-brand mb-0 h1 text-center">Legion Analytics</span>
            <div class="form-inline my-2 my-lg-0">
                    <button class="btn btn-warning my-2 my-sm-0" id='open-modal-btn' data-toggle="modal" data-target="#update-modal">Update DB</button>
            </div>
        </nav>
        <div class="modal fade" id="update-modal" 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">
                        <form method="POST" enctype="multipart/form-data" id="turvo-upload">
                            <div class="file-upload-wrapper">
                                <label for="file">Upload new Turvo Data</label>
                                <input type="file" name="turvo-upload-file" class="form-control-file" id="excel-upload-file">
                                <button class="btn btn-outline-success" type="button" id="submit_turvo" method="POST" style="margin-top: 30px">
                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id = "db_spinner_table"></span>
                                        Submit File
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            {% include 'rate_analysis.html' %}
            {% include 'rate_engine.html' %}
        </div>
        <script src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/plots.js') }}"></script>
    </body>
</html>

Answer 1

High level glance at your code and here is what has been modified:高级别浏览您的代码，这里是已修改的内容：

JQuery included包含 JQuery
Bootstrap js script file included (you only had the css included)包含 Bootstrap js 脚本文件（你只包含了 css）
Form element wrapping button changed to a div to prevent auto form submission表单元素环绕按钮更改为 div 以防止自动提交表单

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head lang="en"> <meta charset="UTF-8"> <title>Legion Analytics</title> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body class = "bg-light"> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1 text-center">Legion Analytics</span> <div class="form-inline my-2 my-lg-0"> <button class="btn btn-warning my-2 my-sm-0" id='open-modal-btn' data-toggle="modal" data-target="#update-modal">Update DB</button> </div> </nav> <div class="container-fluid"> <div class="modal fade" id="update-modal" 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"> <form method="POST" enctype="multipart/form-data" id="turvo-upload"> <div class="file-upload-wrapper"> <label for="file">Upload Excel DAT File</label> <input type="file" name="turvo-upload-file" class="form-control-file" id="excel-upload-file"> <button class="btn btn-outline-success" type="button" id="submit_turvo" method="POST" style="margin-top: 30px"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id = "db_spinner_table"></span> Submit File </button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body>

Bootsrap 模式不显示

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-09 18:34:25

Bootsrap 模式不显示

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-09 18:34:25

解决方案1
0 已采纳 2019-12-09 18:34:25