Django Template 添加模态框 （bootstrap）

HTML：

<button class='btn' data-toggle="modal" data-target="#high_grade_search">{% trans "高级搜索" %}</button>

  点击button弹出模态框，data-target 为模态框的id。

   模态框：

  {% include "click_modal_high_grade_search.html" %}

      模态框代码可以include进来，也可以写一起。当然还是建议用include的方式，方便代码复用。

     click_modal_high_grade_search.html代码如下：

{% load i18n %}
<div class="modal fade" id='high_grade_search' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content" style="background-color: #94afab ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    {% trans "高级搜索" %}
                </h4>
            </div>
            <div class="modal-body" style="width:100%;text-align: center">
                <div class="one-filter" style="display: block;height: 30px">
                    <span class="filter-name">{% trans "发件人" %}:</span>
                    <input style="width: 300px" type="text" id="from-filter" placeholder="{% trans "发件人" %}" value="" />
                </div>
                <div class="one-filter" style="display: block;height: 30px">
                    <span class="filter-name">{% trans "收件人" %}:</span>
                    <input style="width: 300px" type="text" id="to-filter" placeholder="{% trans "收件人" %}" value="" />
                </div>
                <div class="one-filter" style="display: block;height: 30px">
                    <span class="filter-name">&nbsp;&nbsp;{% trans "主题" %}:</span>
                    <input style="width: 300px" type="text" id="subject-filter" placeholder="{% trans "主题" %}" value="" />
                </div>

            </div>
            <div class="modal-footer" style="color: black">
				<button type="button" class="btn btn-default" data-dismiss="modal">
                    {% trans "取消" %}
				</button>
				<button type="button" class="btn btn-primary" id="high-search">
					{% trans "搜索" %}
				</button>
			</div>
        </div>
    </div>
</div>

      模态框还是属于当前页面，所以JS和CSS还是使用当前引用到的一样。

      另外记得引入bootstrap.min.css和bootstrap.min.js

      详细学习请参考：Bootstrap 模态框（Modal）插件。

效果图：