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>Natus et dolore quis quidem voluptatibus temporibus, fugiat recusandae esse velit provident tempore minus corporis ratione iure beatae possimus, modi culpa eos rem consequatur quae beatae assumenda sapiente ut harum, nesciunt ea incidunt veritatis deleniti, cupiditate minus ut natus fugiat consequatur vitae debitis? Consectetur cum maiores earum possimus eaque? Aspernatur velit repudiandae? Minima enim quia deserunt saepe blanditiis assumenda alias similique mollitia beatae sint?</p>
    </div>
    <div class="col-sm-4">
        <p>Aliquam eligendi a vel excepturi cum nobis. Reprehenderit voluptatibus animi a molestias ducimus, laborum quisquam ab itaque nihil nostrum, quam magni architecto voluptatibus ratione velit consequatur aspernatur accusantium quis illum voluptatem, nulla optio consequatur dolorum vero debitis repellat.</p>
    </div>
    <div class="col-sm-4">
        <p>Itaque fugit ex alias quidem debitis ullam magnam sequi odit, beatae odio nihil aspernatur similique voluptates, error quis provident minus officia odio nam nemo? Voluptates aperiam quae ut harum laborum ipsa quas distinctio sit tempora et, voluptatem non vero consectetur assumenda ullam tempore, numquam tenetur porro deleniti reprehenderit voluptatem quis eos in iusto labore, deleniti natus ullam quisquam ex laborum quod quo, deleniti quibusdam consequatur sint aliquam? Enim dolorum unde sequi odio, qui voluptatibus quisquam sunt debitis velit eligendi commodi placeat totam expedita, magni labore magnam debitis amet dicta sed quos vel quam, sunt sapiente ipsa cum quia magni, temporibus ea dolore suscipit expedita beatae obcaecati sequi?</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 %}