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>Incidunt tenetur ex perferendis eius minus dignissimos. Omnis eius aperiam asperiores voluptas, nobis non quidem aliquid mollitia iusto laboriosam ut sequi, eius necessitatibus eaque perspiciatis rerum vero facilis voluptates maxime, quas officia provident quasi vitae officiis hic maiores dicta debitis laboriosam? Itaque obcaecati rerum dicta facilis aliquam sed, ab tempore saepe veniam ipsum natus explicabo, impedit debitis quis ad dignissimos pariatur natus doloribus in?</p>
    </div>
    <div class="col-sm-4">
        <p>Aliquid reiciendis libero tempora dolorum. Veritatis perferendis impedit consectetur sapiente maxime in dignissimos sed odio? Omnis perferendis velit explicabo voluptatem nihil saepe alias magnam nemo, inventore soluta omnis nesciunt quas eius veniam et corrupti?</p>
    </div>
    <div class="col-sm-4">
        <p>Animi nam illo error odit deserunt ducimus iste. Saepe ullam laudantium necessitatibus magnam magni et animi, nam nesciunt similique vero adipisci labore eius quos natus itaque, voluptates deleniti non accusamus iure laudantium veritatis culpa vel. Eum odit vel reiciendis accusantium, earum minus voluptate obcaecati impedit ipsa ea ducimus voluptatum explicabo nemo magni, autem temporibus natus maiores aperiam illo et odio tempora assumenda perferendis, saepe amet consectetur iste voluptate aliquid officiis quos et, deserunt esse tempore saepe officiis porro?</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 %}