Can a django view be displayed in a lightbox?

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/18426806/can-a-django-view-be-displayed-in-a-lightbox

标签

javascript

jquery

django

jquery-ui

lightbox