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>Incidunt fugiat porro, veniam amet voluptatibus minima aspernatur repellendus quibusdam minus tempore quidem iste, beatae totam eius laudantium quas doloribus qui asperiores aliquam in, labore magni aspernatur adipisci, repellendus dolores architecto omnis non ad corporis provident dolorem. Saepe mollitia ratione modi fugit, quia eos natus, mollitia repellat tempora modi iure nobis libero iusto nulla harum rerum, vitae soluta id. Temporibus omnis expedita eveniet nisi blanditiis molestias a dolorum sit exercitationem, voluptatem accusantium ab.</p>
    </div>
    <div class="col-sm-4">
        <p>Voluptate iusto rerum tempore libero exercitationem quisquam, recusandae saepe maxime mollitia vel labore, eaque non possimus repellendus temporibus est sed atque quo quasi culpa, sequi qui dolorum cupiditate architecto blanditiis veritatis fugit? Explicabo incidunt consectetur assumenda amet repellendus ducimus? Aut cumque dicta asperiores nihil officiis sequi delectus numquam consequuntur, incidunt amet sit vitae veniam voluptas ea officiis, saepe quod eaque nobis ullam explicabo suscipit.</p>
    </div>
    <div class="col-sm-4">
        <p>Explicabo alias delectus laudantium nulla voluptas quasi rerum, ab error alias corrupti, voluptatem dolorum repellendus sequi sapiente eum nisi quod harum.</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 %}