<!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">×</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标签是，模态对话框会瞬间消失