django 1.7引导弹出窗体的简单示例

django 1.7引导弹出窗体的简单示例,django,twitter-bootstrap,popup,Django,Twitter Bootstrap,Popup,我看了很多例子,尝试了一些,但似乎没有一个能轻易做到我想要的。我在引导程序中安装了crispy表单。我可以得到模态形式,但不能弹出窗口 这是我想要的 单击属于模型项的按钮 显示带有模型项字段的弹出窗口 我想编辑项目、取消或删除选项 这是我的模型: import datetime from django.db import models from django.utils import timezone from django.utils.encoding import smart_unicod

我看了很多例子,尝试了一些,但似乎没有一个能轻易做到我想要的。我在引导程序中安装了crispy表单。我可以得到模态形式,但不能弹出窗口

这是我想要的

单击属于模型项的按钮 显示带有模型项字段的弹出窗口 我想编辑项目、取消或删除选项 这是我的模型:

import datetime

from django.db import models
from django.utils import timezone
from django.utils.encoding import smart_unicode

from ordered_model.models import OrderedModel

class RequestMessage(OrderedModel):

    SANITY = 'SANITY'
    STRESS = 'STRESS'
    REGRESSION = 'REGRESSION'

    TEST_CHOICES = (
        (SANITY, SANITY),
        (STRESS, STRESS),
        (REGRESSION, REGRESSION),        
    )

    PLATFORM_CHOICES = (
        (QTP, QTP),
        (SELENIUM, SELENIUM),
        (JMETER, JMETER),        
    )

    type = models.CharField(max_length=20,     choices=TEST_CHOICES,default=SANITY)
    platform = models.CharField(max_length=20, choices=PLATFORM_CHOICES, default=JMETER)
    tests = models.TextField()
    parameters = models.TextField()
    source = models.CharField(max_length=30, default='GUI')
    queue = models.CharField(max_length=10,default='New')

    email = models.EmailField(default='email@example.com')
    timestamp = models.DateTimeField(auto_now_add=True, auto_now=False)
    updated =   models.DateTimeField(auto_now_add=False, auto_now=True)
    ip = models.GenericIPAddressField(editable=False, blank=True, null=True)

    def __unicode__(self):              # __unicode__ on Python 2
        return smart_unicode("%s %s %s" % (self.platform, self.type, self.id))

    class Meta(OrderedModel.Meta):
        pass
这是我的表格

from django import forms

from .models import RequestMessage

class RequestMessageForm(forms.ModelForm):
    class Meta:
        model = RequestMessage
        widgets = {'queue': forms.HiddenInput(),
               'source': forms.HiddenInput()}
我的部分视图-这里不显示delete和post方法

class RequestMessageListView(ListView):

    model = RequestMessage
    template_name = 'article-list.html'

    def get_context_data(self, **kwargs):
        context = super(RequestMessageListView, self).get_context_data(**kwargs)
        return context
我已经看过: -django fm - -django弹出式表单

更新 我正试图用阿比迪博的解决方案来解决这个问题。到目前为止,我能够使屏幕变暗,说明模态是可见的,但它不是

如果我要删除引导,那么我可以很容易地链接到页面,但它会破坏弹出模式的目的

以下是模板项_list.hmtl:

{% extends 'base.html' %}
{% load bootstrap3 %}


{% block extra_js%} 
<script src="http://malsup.github.com/jquery.form.js"></script>
{% endblock %}

{% block content %}
<section>

    <!-- Modal -->
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    </div><!-- /.modal -->

    <h1>Items list</h1>

    <table class="table table-bordered table-hovered "cellspacing='0'>
        <tr>
            <th>Item</th>            
        </tr>
        {% for item in object_list %}
            <tr>
                <td>
               <a class="fa fa-pencil" data-toggle="modal" href="{% url 'item_edit' item.id %}" data-target="#modal" title="edit item" data-tooltip>
                {% url 'item_edit' item.id %} 
               </a>

                </td>
            </tr>
        {% endfor %}
    </table>
</section>
{% endblock %}
编辑模板项_edit_form.html:

<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <form id="item_update_form" method='post' class="form" role="form" action="/{% url 'item_edit' item.id %}/">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title" id="myModalLabel">Item {{ item.id }}</h4>
              </div>
              <div class="modal-body">
                    {% csrf_token %}
                    {{ form.non_field_errors }}
                    <div class="form-group">
                    {% for field in form %}
                        <div class="form-group">
                            {% if field.errors %}
                                <ul class="form-errors">
                                {% for error in field.errors %}
                                    <li><span class="fa fa-exclamation-triangle"></span> {{ error|escape }}</li>
                                {% endfor %}
                                </ul>
                            {% endif %}
                            {{ field.label_tag }} {{ field }} 
                            {% if field.help_text %}<div class="form-helptext">{{ field.help_text }}</div>{% endif %}
                        </div>
                    {% endfor %}
              </div>
              <div class="modal-footer">
                <input type="button" class="btn btn-default" data-dismiss="modal" value="annulla" />
                <input type="submit" class="btn btn-primary" value="save" style="margin-bottom: 5px;" />
              </div>
        </form>
        <script>
            jQuery('.modal-content .calendar').datepicker({ dateFormat: "yy-mm-dd" });

                var form_options = {
                    target: '#modal',
                    success: function() {  }
                }
                $('#item_update_form').ajaxForm(form_options);
        </script>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
以及成功项目_edit _form _success.html:

<div class="modal-dialog modal-lg">
    <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">Hmmmmmmm</h4>
        </div>
        <div class="modal-body">
            <p>Yeah!</p>
            <script> 
            setTimeout(function() { jQuery('#modal').modal('hide'); }, 1000); 
            $('body').on('hidden.bs.modal', '.modal', function () { 
                $(this).removeData('bs.modal'); }); 
            </script>
        </div>
        <div class="modal-footer">
        </div>
     </div>
     <!-- /.modal-content -->
</div>

表单未与视图链接。您如何在模板中显示表单?我有另一种方法来添加链接表单的请求。requestMessage=RequestMessageFormrequest.POST或如果requestMessage.is\u有效则为None:保存\u it=requestMessage.savecommit=False保存\u it.save messages.successrequest,'您的请求已添加到队列'requestMessage.full\u clean return HttpResponseRedirect'/article list'return render\u to\u ResponseAd\u Request.html,locals,context\u instance=RequestContextrequest