Opening a static Dialog

The layout of the Dialog is fully described by the referenced HTML template: either the default "#dialog_generic" of a specific one.

You can fully customize the rendering with CSS; the default styles are provided by static/frontend_forms/css/frontend_forms.css

dialog1 = new Dialog({
    dialog_selector: '#dialog_generic',
    html: '<h1>Static content goes here ...</h1>',
    width: '600px',
    min_height: '200px',
    title: '<i class="fa fa-calculator"></i> Select an object ...',
    footer_text: 'testing dialog ...',
    enable_trace: true
});

dialog1.open()

Opening a dynamic Dialog

In most cases, you will rather produce the dialog content dynamically.

To obtain that, just add an "url" option to the Djalog constructor, and it will be automatically used to obtain the Dialog content from the server via an Ajax call.

dialog1 = new Dialog({
    ...
    url: "/samples/simple-content",
    ...

Sometimes it is convenient to reuse the very same single view to render either a modal dialog, or a standalone HTML page.

This can be easily accomplished providing:

• an "inner" template which renders the content
• an "outer" container template which renders the full page, then includes the "inner" template
• in the view, detect the call context and render one or another

def simple_content2(request):

    # Either render only the modal content, or a full standalone page
    if request.is_ajax():
        template_name = 'frontend/includes/simple_content2_inner.html'
    else:
        template_name = 'frontend/includes/simple_content2.html'

    return render(request, template_name, {
    })

here, the "inner" template provides the content:

<div class="row">
    <div class="col-sm-4">
        <p>Beatae cupiditate accusantium, delectus omnis odio soluta deleniti, voluptatem quia nobis sit maxime distinctio a dolores optio itaque. Amet mollitia fuga laboriosam error voluptatibus voluptatem cum saepe eum aspernatur nesciunt, omnis esse delectus nulla officiis aut necessitatibus beatae voluptatibus quos praesentium quas, esse quibusdam necessitatibus repellendus quod? Sed accusantium commodi aperiam, sapiente atque neque consectetur eum iste nisi incidunt rerum, omnis similique ullam incidunt nobis tempora, voluptatum error possimus eum rerum labore autem, dolores distinctio error obcaecati vel maiores ea est possimus omnis reprehenderit? Delectus atque velit adipisci beatae eveniet fuga veritatis soluta accusantium, praesentium amet enim modi illo ipsum dolore deleniti nobis minima consequatur, iure cum nihil delectus totam nesciunt cumque similique numquam.</p>
    </div>
    <div class="col-sm-4">
        <p>Blanditiis amet minima consequuntur incidunt debitis necessitatibus sint mollitia dolore, sint nisi eaque tempore laboriosam obcaecati minima a nulla quae hic, itaque ullam rem reiciendis facilis necessitatibus ea nisi assumenda accusantium, fugit deserunt perferendis corporis eligendi suscipit soluta veritatis molestiae molestias magni, non ab quis iste incidunt cumque rerum facere alias.</p>
    </div>
    <div class="col-sm-4">
        <p>Nemo deserunt quidem fugiat accusamus iusto quae, ipsam laudantium doloremque dolorum odio cupiditate error quod ea nemo, nostrum eius at laboriosam nam vel, nisi molestias harum in accusamus, earum aliquam architecto distinctio ducimus nobis ipsum autem? Molestias cum atque enim, facere blanditiis quod eos impedit quis quasi sequi, mollitia temporibus harum repellendus voluptatibus? Aperiam perferendis velit amet at sequi officiis, cum eveniet animi atque sed nisi, temporibus nobis quis cumque. Tempore blanditiis sint porro tempora dolor esse iusto voluptate magnam ratione, ad deserunt velit dolor quibusdam dolores, ea pariatur id officia et iure placeat.</p>
    </div>
</div>

while the "outer" one renders the full page:

{% extends "base.html" %}
{% load static staticfiles i18n %}

{% block content %}
{% include 'frontend/includes/simple_content2_inner.html' %}
{% endblock content %}