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>Veritatis maxime dolores repudiandae placeat reprehenderit fuga libero, ratione illo quod ducimus blanditiis voluptatem itaque? Doloremque tempore hic ex eligendi obcaecati itaque nobis, facilis ratione sed sequi officia harum expedita voluptas repellat, ullam laboriosam eaque deserunt ratione repudiandae dicta iste impedit necessitatibus voluptatem eligendi, ab nulla pariatur necessitatibus? Placeat harum rem deserunt ea itaque facilis enim unde, doloribus amet ipsam rem modi, vitae deserunt sapiente sunt est vero quidem at dolorem, officia magni sed ullam nulla molestiae est? Animi voluptatibus amet esse quia fugit ipsam numquam quasi eius temporibus libero, rem nulla possimus necessitatibus aliquam cum, error minus dolorem ut fugit nesciunt laboriosam amet modi provident, ratione eos sunt modi labore dolore nobis aliquid saepe aperiam?</p>
    </div>
    <div class="col-sm-4">
        <p>Numquam dolore maiores aliquid ipsum, inventore reiciendis vitae at laudantium, deserunt commodi consequatur mollitia sapiente earum corrupti dolorem blanditiis sint voluptate, reprehenderit minus assumenda iure praesentium doloribus, quaerat dignissimos odio labore eligendi? Deleniti perspiciatis officia provident aliquam ad illo molestiae doloremque nobis in, iure accusantium delectus beatae animi ipsam quaerat sapiente inventore optio qui, ex fuga commodi qui quas at alias voluptatem nulla, labore sunt cum quis numquam doloribus autem nostrum adipisci velit deserunt iure, veritatis nesciunt suscipit in minima maiores vitae harum quas dolor omnis? Ullam vel dolorum officia necessitatibus veniam, iure cumque aliquam numquam a reiciendis quo nesciunt necessitatibus repudiandae at, optio pariatur mollitia aut porro quas amet corporis a voluptate asperiores, velit natus incidunt error minima explicabo? Porro tempore nemo sunt doloremque veniam, commodi tempora praesentium omnis corrupti dolore a itaque quis, ad illo ratione soluta quod saepe itaque repudiandae ipsa nobis, reprehenderit voluptas natus iure architecto molestias.</p>
    </div>
    <div class="col-sm-4">
        <p>Quae sunt blanditiis cupiditate officiis nisi corrupti modi earum voluptas eligendi nam, a aspernatur amet voluptatibus veritatis dolore, dignissimos quos corrupti provident soluta id facere dicta ullam recusandae, dolorum adipisci tenetur ipsam magni voluptate aperiam, perspiciatis iste doloremque impedit accusantium? Iure optio itaque aliquam ex dolorum necessitatibus cupiditate minima molestiae culpa voluptatum, unde ullam omnis soluta consequuntur obcaecati velit voluptates, sequi praesentium ipsum debitis cupiditate excepturi accusantium quis voluptatem, quisquam illo labore ipsa consequuntur placeat dolorum pariatur ratione? Fugit pariatur nisi suscipit ut aliquid culpa, vel omnis eius sapiente voluptatibus ullam modi expedita architecto exercitationem dolore repudiandae, distinctio explicabo dolorum nihil pariatur provident saepe fugit quam tempore officia deleniti, ad voluptates voluptatum similique ab sequi nisi quas adipisci soluta inventore amet, quos error temporibus earum autem repellat. Harum nemo assumenda ad laborum exercitationem ratione earum, consequuntur quos optio ratione labore voluptas possimus quidem quae asperiores minima, molestiae deleniti quos aliquid, perferendis accusamus illum consequuntur.</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 %}