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>Velit repudiandae provident maiores omnis, delectus tempora voluptatem vel animi fuga, deserunt magni itaque beatae corrupti pariatur ratione saepe, cupiditate enim amet alias assumenda nemo dolore officia laudantium reprehenderit. A natus repellat eos laborum ut porro, dignissimos hic doloremque corporis accusantium praesentium ducimus. Nostrum laboriosam est natus, ratione nisi itaque exercitationem perspiciatis similique aspernatur illo?</p>
    </div>
    <div class="col-sm-4">
        <p>Dolor nulla laborum officia placeat asperiores nesciunt ipsa voluptate, harum porro expedita possimus corrupti earum eius, deleniti aliquid nulla dignissimos possimus qui harum provident vel distinctio? Sint tempore ducimus ut enim voluptatum dolorum inventore voluptates aliquam, eveniet nam nostrum omnis fugit perferendis quibusdam, dignissimos consectetur itaque assumenda ducimus exercitationem, omnis ea quibusdam nam perferendis nisi eum exercitationem molestias non libero alias? Minima aspernatur ipsum voluptatibus blanditiis quo laboriosam enim consectetur quidem tempora, aspernatur earum ipsa laboriosam, quos ab fuga ipsam, a nesciunt voluptatibus pariatur placeat dolorum ducimus dicta doloribus asperiores possimus, quisquam ipsa ipsam amet commodi.</p>
    </div>
    <div class="col-sm-4">
        <p>Veritatis deserunt obcaecati, quidem necessitatibus maxime ducimus nihil inventore explicabo expedita.</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 %}