django视图可以在灯箱中显示吗? [英] Can a django view be displayed in a lightbox?

查看:117
本文介绍了django视图可以在灯箱中显示吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您将如何在灯箱中显示 django 视图,其余的网站仍然在后台。



其实我想要一个具有FormView弹出的模态的jQuery 对话框,并保留我的网站的其余部分使用画布作为全页面背景。我看过jQuery演示,它显示了一个模态表单,但我不明白如何在对话框中渲染视图

解决方案

如果从视图中渲染模板你可以去两个选项之一。



您可以让模板扩展您的主模板,该模板具有画布全页面背景,并将您想要的额外信息转换为格式正确的div,以转换为模态。



第二个选项是将模态标记放在主模板中,并具有一个ajax函数,它将从视图加载数据并将其置于动态模式。 / p>

示例方法1。



HTML



main_template.html

 < html> ; 
< head> .....< / head>
< body> ..... {%block modal_block%}< / body>
< script>
$(function(){
$(#myModal).dialog({
modal:true
});
});
< / script>
< / html>

modal_template.html

  {%extends'main_template.html'%} 
{%block modal_block%}
< div id =myModal>< / div>
{%endblock%}

在此方法中,您可以在视图中渲染modal_template.html这将创建一个包含您的主要内容的HTML页面,但也包括额外的模态div。您可以在视图/模板中执行所需的任何模板格式。



示例方法2

 < html> 
< head> .....< / head>
< body> .....< / body>
< script>
$(document).ready(function(){
$ .get('views_url',function(data){
var myModal = $(data);
$ 'body')。append(myModal);
$(myModal).dialog({
modal:true
});
});
});
< / script>
< / html>

在这种情况下,您应该从视图中渲染模态的HTML。


How would you go about displaying a django view in a lightbox with the rest of the website still in the background.

In fact I'd like to have a modal jQuery dialog with a FormView "pop up" and keep the rest of my site, which uses a canvas as a full-page background. I've seen the jQuery demo, that shows a modal form, but I don't understand how I could render a view in the dialog.

解决方案

If you render a template from your view you can go one of two options.

You can have the template extend your main template which has the canvas full page background and render the extra information you want into a properly formatted div to be turned into a modal.

The second option is to put the modal markup in your main template and have an ajax function which will load the data from the view and put it into the modal dynamically.

Example method 1.

HTML

main_template.html

<html>
    <head>.....</head>
    <body>.....{% block modal_block %}</body>
    <script>
         $(function() {
             $( "#myModal" ).dialog({
                 modal: true
             });
         });
    </script>
</html>

modal_template.html

{% extends 'main_template.html' %}
{% block modal_block %}
    <div id="myModal"></div>
{% endblock %}

In this method you then render modal_template.html in your view which will create a html page that includes your main content but also includes the extra modal div. You can then do any of the template formatting required within your view/template.

Example Method 2

<html>
    <head>.....</head>
    <body>.....</body>
    <script>
         $(document).ready(function(){
             $.get('views_url',function(data){
                 var myModal = $(data);
                 $('body').append(myModal);
                 $( myModal ).dialog({
                     modal: true
                 });
             });
         });
    </script>
</html>

In this case you should just render the html of the modal from the view.

这篇关于django视图可以在灯箱中显示吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆