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>Officiis corrupti autem odit maxime iusto blanditiis quos impedit unde, quia libero dicta amet cumque iusto blanditiis aperiam quaerat quos molestias officiis, minus facere reiciendis, at cupiditate excepturi temporibus eum praesentium consequuntur fuga sit et repudiandae dicta. Reiciendis veritatis qui soluta facere sit culpa eligendi, in dolores quia repellat possimus ducimus aut voluptatibus ratione a excepturi, ratione alias enim sapiente, doloremque totam natus consectetur incidunt perspiciatis amet asperiores sint facere vero dolores, illum minus ab id impedit ipsa? Laborum labore tempora at officiis impedit perspiciatis? Rem et laborum ex officiis placeat a est quas distinctio, magnam officia quo culpa quibusdam temporibus reprehenderit neque illum labore aperiam placeat, laboriosam sunt neque.</p>
    </div>
    <div class="col-sm-4">
        <p>Nostrum esse adipisci a culpa repellendus molestias ratione, aliquam quia deserunt consectetur totam labore vel inventore iste. Maiores aut libero.</p>
    </div>
    <div class="col-sm-4">
        <p>Architecto cumque hic laboriosam, dicta repellendus fuga iste voluptatum officia temporibus fugit dolorem, omnis labore unde doloribus tenetur autem quis in libero porro? Veniam quia excepturi amet. Corporis id suscipit odio repudiandae incidunt necessitatibus voluptatem quae. Doloremque similique nobis?</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 %}