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>Saepe dolore illum, quia dicta itaque veritatis illo, recusandae id dolore impedit esse minus perferendis delectus quia error, saepe maiores rerum, provident accusantium assumenda totam. Rerum quos nesciunt tenetur saepe assumenda quidem quibusdam cumque, exercitationem sunt voluptatum nihil, ipsa sint qui aliquid, mollitia fugiat repellendus dignissimos nisi necessitatibus, dolore praesentium repudiandae temporibus corrupti vero cumque harum? Accusantium ex vitae reiciendis quos? Eveniet consequatur harum quisquam quidem voluptate velit laboriosam, voluptas quaerat earum rem, fugit ea consequuntur aliquam eveniet labore quas necessitatibus, beatae ab ex sapiente obcaecati omnis voluptates qui soluta deleniti aperiam?</p>
    </div>
    <div class="col-sm-4">
        <p>Ullam laboriosam unde, illum omnis rem sit alias voluptatibus, soluta fugiat saepe, iusto odit eos reiciendis nihil perferendis quo. Qui reiciendis laudantium debitis odit, consequatur adipisci consequuntur corrupti modi enim vitae possimus facilis laboriosam minima?</p>
    </div>
    <div class="col-sm-4">
        <p>Doloremque non ea soluta blanditiis rerum, ea ipsam rem facilis omnis animi, impedit in provident quidem vero voluptatem reiciendis, explicabo quae quaerat.</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 %}