时间戳

首页 > 解决方案 > Bootsrap 模态未显示

javascript - Bootsrap 模态未显示

问题描述

我在导航栏中有一个按钮，单击该按钮应打开一个模式。我尝试遵循引导文档和这个问题：bootstrap modal not working at all

到目前为止没有任何效果，并且控制台没有显示任何错误。

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>

标签： javascriptflaskbootstrap-4jinja2

解决方案

对您的代码进行高级浏览，以下是已修改的内容：

  1. 包括 jQuery
  2. 包含引导 js 脚本文件（您只包含 css）
  3. 表单元素包装按钮更改为 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>

推荐阅读