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>Repellat mollitia placeat corrupti itaque consequatur recusandae perspiciatis maiores excepturi, labore molestias quisquam qui officiis autem, sapiente error illo aliquid impedit minus saepe molestias itaque fugit ex. Doloribus itaque ratione id laboriosam cupiditate ea commodi perspiciatis veniam, dignissimos blanditiis eaque illum at rerum, eos nostrum amet veritatis architecto a nihil suscipit expedita sapiente aliquam odio, dignissimos quo neque corporis doloremque quibusdam sapiente fugiat nisi rem, fugiat quod vero animi? Dicta repellat illum cumque sapiente est praesentium doloremque, cumque officiis nostrum provident fuga consectetur tempora qui aliquid, architecto deserunt aspernatur illum nesciunt eligendi reiciendis deleniti quia, iusto eius quasi veritatis magnam eum ullam unde eaque blanditiis aspernatur.</p>
    </div>
    <div class="col-sm-4">
        <p>Nesciunt adipisci vitae repellendus at corporis similique voluptate eligendi ab, reiciendis perspiciatis dignissimos dicta quasi maxime nesciunt nihil quis. Enim sint harum similique non, non voluptatem explicabo rerum, ipsum beatae sapiente harum nulla eveniet quidem perferendis fuga nesciunt.</p>
    </div>
    <div class="col-sm-4">
        <p>Ut itaque corrupti? Dolores natus aliquid blanditiis vel quaerat expedita eius? Voluptatem minus atque tempora fugiat consectetur eos distinctio, autem pariatur iste non nulla illum eligendi, delectus asperiores molestiae cum, sit sapiente animi provident corporis suscipit, eum est totam amet.</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 %}