<!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标签是，模态对话框会瞬间消失
原文地址：https://www.cnblogs.com/lhqlhq/p/9165398.html
时间： 2024-07-29 17:41:30