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>Distinctio omnis odit illum saepe odio sit excepturi sunt iste repellendus, tempore tenetur quod necessitatibus odio maxime iusto aperiam molestias praesentium, reiciendis at nihil labore sunt necessitatibus vel impedit est dolorum nemo illum. Quisquam expedita ea aut sint ipsa sit atque saepe perferendis corrupti suscipit, ratione non praesentium sapiente exercitationem assumenda quo consequatur architecto. Aliquam consectetur officia voluptatum aperiam delectus suscipit ipsa magni quas?</p>
    </div>
    <div class="col-sm-4">
        <p>Ipsam dolor earum, molestiae aperiam omnis ex perferendis assumenda impedit iusto aliquam magni. Incidunt dolore ipsum fuga rerum sapiente dolores quae voluptate ea blanditiis doloremque, exercitationem eius dolor atque modi rerum dignissimos quas accusamus maiores sint dolores. Quidem dolorum pariatur perspiciatis animi delectus illo sapiente inventore quo, voluptates repellendus quos totam rem vel a, consequuntur delectus repudiandae magnam.</p>
    </div>
    <div class="col-sm-4">
        <p>Error odit tempora natus amet facere maiores iste. Nam impedit et mollitia corporis deserunt minus laboriosam magni nulla, repellendus maiores iusto expedita nam laudantium hic eligendi, modi at molestiae. Ex cum beatae expedita doloribus iure asperiores, eius sequi reprehenderit maiores repellat eos, earum ad similique ut incidunt modi repellendus ex iusto. Perferendis labore id ut iste quos quod laudantium eligendi odit sint fugiat, est fugiat corrupti unde nam ab, reiciendis recusandae dolores aut repudiandae nam ullam vel, cupiditate perferendis possimus rem mollitia unde aspernatur blanditiis nam fugit?</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 %}