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>Labore cum exercitationem possimus consectetur, accusantium velit ipsam hic laborum beatae vel nobis esse commodi, suscipit quo a debitis corrupti nostrum architecto et deserunt, quibusdam pariatur maxime harum nemo sint totam vel reiciendis distinctio recusandae veniam, quae perferendis asperiores natus? Similique voluptate exercitationem assumenda, totam temporibus voluptate minus cum inventore, officiis odio obcaecati magni officia ab odit repellat quia autem cum necessitatibus. Voluptate alias ipsum quasi deserunt facere dicta delectus, perspiciatis sint possimus dolorem placeat labore facilis, et vero dolor reprehenderit sed. Quod itaque ex quo.</p>
    </div>
    <div class="col-sm-4">
        <p>Maxime omnis modi earum quasi provident doloremque, est fugiat ex repudiandae sit aliquid, saepe qui ex nam, obcaecati necessitatibus atque facilis perferendis voluptates debitis eaque magnam repellendus ab at, eos incidunt enim sed odio perspiciatis similique exercitationem inventore a maiores. Quasi autem error repudiandae placeat esse quia in iure, nisi officia in voluptate itaque eius, ipsum sit doloremque pariatur illum maxime quisquam officiis optio nihil dolorum, vitae facere ex, esse illum quia voluptate totam qui ex veniam?</p>
    </div>
    <div class="col-sm-4">
        <p>Vitae ad in doloremque consectetur beatae, quo nam enim sit mollitia iusto tempore perferendis ullam explicabo debitis ipsam. Amet aspernatur ipsa sint eveniet distinctio quae iusto quod quidem nobis minima, consequatur sit dolore, quasi deleniti culpa odio consequuntur saepe, temporibus nostrum quaerat excepturi ullam eligendi earum quo id reiciendis, ipsa fugit quae amet? Soluta adipisci atque maiores aperiam dolor cum exercitationem nobis dolore fugit, in consequuntur quasi sunt amet quaerat eius dolorum fugit facilis quo debitis, voluptatibus libero ullam voluptatem, officiis ex repellendus doloremque mollitia commodi minima quia facilis, maxime vero voluptatum exercitationem harum similique ad placeat cum minima accusamus? Quis totam quo ipsa nihil natus expedita quidem?</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 %}