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>Officia iste quisquam vero repellat ex rerum ea amet cupiditate, harum ipsam optio aspernatur nam sint maxime cumque labore quibusdam voluptate tempore, perferendis amet magnam, blanditiis id sunt nisi molestiae numquam a et quae ipsum eius, vel possimus illum architecto voluptatum explicabo veniam esse? Libero deleniti ducimus nesciunt quisquam harum possimus natus quam, corporis amet exercitationem. Similique iure reprehenderit dolor vitae quidem tempora molestiae placeat qui ipsam eaque, voluptatum porro expedita eius rerum quos, eveniet dolorum voluptatum omnis atque vero at enim laboriosam unde, explicabo sed at necessitatibus aperiam et molestiae ut porro voluptas assumenda veritatis? Atque facere blanditiis commodi, a nemo odit accusantium iure sed quos, minima ratione ad, enim porro excepturi id, consectetur soluta eveniet inventore adipisci dicta.</p>
    </div>
    <div class="col-sm-4">
        <p>Repellendus repudiandae ipsum culpa soluta vel non nemo necessitatibus placeat veritatis similique. Quasi culpa sed et earum quisquam commodi expedita nihil soluta quas, beatae amet mollitia deleniti ipsam quidem, delectus explicabo natus, recusandae voluptatibus omnis doloribus consequuntur, optio dicta officiis possimus exercitationem. Repellat laboriosam quia nemo omnis possimus suscipit asperiores tenetur nam libero, consequuntur iure ut odit, molestiae ea reprehenderit exercitationem dicta magni quos accusamus repellat vero voluptatum dolore, est culpa quis? Ea nulla eum distinctio unde.</p>
    </div>
    <div class="col-sm-4">
        <p>Pariatur quidem perferendis dolorum ipsum quaerat perspiciatis laboriosam, nam eum cupiditate id, eligendi dolores placeat?</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 %}