bootstrp实现同一界面多个模态框
作者:互联网
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal_1">图书列表</button>
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal_2">出版社列表</button>
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal_3">作者列表</button>
<!--第一个模态框的ID为myModal-->
<div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
<!--模态框标题-->图书列表
</h4>
</div>
<div class="modal-body" style="width: 550px; margin: 0px auto;">
<!-- 添加你的弹窗内容 -->
{% for book in book_list %}
<li>{{ book.title }}</li>
{% endfor %}
<!-- 添加你的弹窗内容 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--第二个模态框的ID为myModal_2-->
<div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
<!--模态框标题-->出版社列表
</h4>
</div>
<div class="modal-body" style="width: 550px; margin: 0px auto;">
<!-- 添加你的弹窗内容 -->
{% for publish in publish_list %}
<li>{{ publish.name }}</li>
{% endfor %}
<!-- 添加你的弹窗内容 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--第三个模态框的ID为myModal_3-->
<div class="modal fade" id="myModal_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
<!--模态框标题-->作者列表
</h4>
</div>
<div class="modal-body" style="width: 550px; margin: 0px auto;">
<!-- 添加你的弹窗内容 -->
{% for author in author_list %}
<li>{{ author.name }}</li>
{% endfor %}
<!-- 添加你的弹窗内容 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
标签:模态,界面,author,list,publish,列表,book,endfor,bootstrp 来源: https://www.cnblogs.com/hanfe1/p/12229727.html