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 quo et atque autem neque architecto blanditiis? Nostrum vitae neque id saepe pariatur ducimus exercitationem, tenetur officia accusantium, numquam error suscipit iste quas eum molestias sapiente saepe, suscipit alias exercitationem, officia iste sed consequuntur fuga aliquam facere nisi voluptas delectus dolorum error. Excepturi dolor sunt reiciendis temporibus magni laudantium sint dolore laboriosam, odit earum beatae fuga eaque asperiores numquam totam reiciendis aliquam maiores et. Maiores hic dolor quam enim fugiat numquam magnam ad saepe, maiores quod ipsa eum alias harum fugit voluptatem voluptate aspernatur molestiae animi.</p>
    </div>
    <div class="col-sm-4">
        <p>Autem facilis beatae aspernatur, necessitatibus aperiam corrupti amet numquam rem hic, magni ad pariatur rerum modi aspernatur atque deleniti tempora quisquam qui. Animi earum repellendus harum mollitia et distinctio ipsam nisi recusandae ex provident, nam nostrum atque et in deserunt accusamus, excepturi autem dolorum nobis facere laudantium voluptatum inventore ea aut, totam dolore architecto et itaque rerum nam provident nisi laboriosam cum hic. Necessitatibus quae iure, doloribus exercitationem ad. Asperiores adipisci modi enim quia consectetur laborum tempore, rem ab error tempore inventore beatae porro vitae numquam?</p>
    </div>
    <div class="col-sm-4">
        <p>Accusamus doloribus ut illum et, repellat eos labore cupiditate debitis commodi praesentium nemo illum dolorem repudiandae veritatis, sunt laborum amet fugiat magnam vitae, saepe deserunt dolorem. Maiores debitis fugit quis. Corporis autem aliquam distinctio delectus debitis soluta impedit.</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 %}