Bootstrap无法弹出模态框的解决办法

发布时间：2020-12-17 20:52:34 所属栏目：安全来源：网络整理

导读：! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Title / title link rel ="stylesheet" href ="/static/plugins/bootstrap/css/bootstrap.css" link rel ="stylesheet" href ="/static/plugins/font-awesome/css/font-awesome.css" / hea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css">
</head>
<body>

<div class="container">
    <div style="padding: 20px 0">
        <a href="" class="btn btn-primary"  data-toggle=‘modal‘ id="addBtn" >添加</a>  //a标签需要设置弹出对话框时，需要提前添加 data-toggle=‘modal‘  
        <a href="" class="btn btn-danger">删除</a>
    </div>

    <div >
        <table class="table table-bordered">
            <thead >
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="table table-striped">
                <tr >
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td class="text-center">
                        <a href="" class="glyphicon glyphicon-remove"  ></a>
                        <a href="" class="fa fa-eraser"></a>
                    </td>
                </tr>
                <tr>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td class="text-center">
                        <a href="" class="glyphicon glyphicon-remove"></a>
                        <a href="" class="fa fa-eraser"></a>
                    </td>
                </tr>

                {% for row in stu_list %}
                    <tr >
                    <td>{{ row.id }}</td>
                    <td>{{ row.username }}</td>
                    <td>{{ row.age }}</td>
                    <td>
{#                        {{ row.gender }}#}
                        {% if row.gender == 1 %}
                            <div>男</div>
                        {% elif row.gender == 0 %}
                            <div>女</div>
                        {% endif %}
                    </td>
                    <td>
                        {{ row.cs.titile }}
                    </td>
                    <td class="text-center" >
                        <a href="" class="glyphicon glyphicon-remove"  ></a>
                        <a href="" class="glyphicon glyphicon-pencil"></a>
                    </td>
                    </tr>
                {% endfor %}


            </tbody>
        </table>
    </div>

</div>



<!-- Modal -->
<div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div>


<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>


        $(‘#addBtn‘).click(function () {
            $(‘#addModal‘).modal(‘show‘)
        })



</script>

</body>
</html>

用a标签弹出对话框时，需要在a标签内添加 data-toggle = ‘modal‘,否则，点击a标签是，模态对话框会瞬间消失

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!