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>Laboriosam voluptates nisi ad, similique dolorem et at, quis animi aliquam incidunt quia fugit cupiditate aliquid ducimus, porro dolorum eveniet doloribus consectetur, alias cum iste minus. Quasi odit omnis temporibus vitae enim ullam, perferendis praesentium eaque autem molestias atque excepturi veritatis nam soluta, id nesciunt iste enim voluptatum beatae voluptas aut pariatur nisi, enim voluptatum amet nobis tempora vero rem aut eaque sapiente laudantium explicabo, facere et delectus asperiores ea quod totam repellat impedit laborum voluptatem.</p>
    </div>
    <div class="col-sm-4">
        <p>Ipsam porro maxime labore molestiae, repudiandae quasi dolore quae nostrum, vel animi repellat harum perspiciatis quibusdam rem adipisci asperiores, nulla expedita distinctio commodi facere reprehenderit tenetur? Commodi enim repellat, debitis earum fuga corrupti dolore commodi. Modi maiores cumque tempore nobis accusantium placeat unde corrupti praesentium possimus odio, sint a nam nemo labore laborum mollitia architecto quis, doloribus nisi in deserunt recusandae mollitia laborum at, nihil veritatis ipsa fuga dignissimos ducimus, placeat veritatis ea itaque reiciendis dignissimos reprehenderit repellendus quaerat?</p>
    </div>
    <div class="col-sm-4">
        <p>Magnam voluptas minima dolore fugit aliquam voluptatum, voluptatem eveniet natus libero unde numquam nemo dolorem atque architecto nulla, pariatur blanditiis voluptates saepe totam alias magni earum accusamus quia neque fugiat, qui ad animi sed laudantium fuga atque illo fugit quaerat excepturi, maxime perspiciatis maiores placeat. Obcaecati esse iure tempore repellendus velit consequatur at ut quas odio sequi, totam fuga illo laboriosam dignissimos a qui at soluta. Dolore repellat fugit voluptatibus eum aliquid odio assumenda possimus dolores.</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 %}