Django Template 添加模态框 （bootstrap）

HTML：

data-target="#high_grade_search">{% trans "高级搜索" %}

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

   模态框：

  {% include "click_modal_high_grade_search.html" %}

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

     click_modal_high_grade_search.html代码如下：

 

{% load i18n %}

    

        

            

                
                    ×
                
                

                    {% trans "高级搜索" %}
                
            
            

                

                    {% trans "发件人" %}:
                    
                
                

                    {% trans "收件人" %}:
                    
                
                

                      {% trans "主题" %}:
                    
                

            
            

				
                    {% trans "取消" %}
				
				
					{% trans "搜索" %}
				
			
        
    

 

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

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

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

效果图：