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>Molestias iure saepe eligendi impedit alias ipsam esse dolorum itaque, quia tempora consectetur vel impedit commodi maxime officia distinctio a deleniti, fuga amet ratione natus nulla odit repellat rerum libero porro? Nam temporibus quasi dolorem aliquid tempore ex nobis non similique velit, quia quam commodi dicta assumenda nam eum natus, esse aliquam reprehenderit quasi eius maiores ipsam quae doloribus nisi sunt sapiente, facilis quis veritatis recusandae dolore mollitia hic, deleniti maxime quas molestiae architecto voluptatum itaque quos porro voluptatibus nostrum possimus. Cupiditate aspernatur dolore doloremque tempora sit ipsum rem odit perspiciatis, deleniti amet perferendis mollitia at repellat recusandae a nesciunt voluptatibus fuga autem?</p>
    </div>
    <div class="col-sm-4">
        <p>Ea perferendis placeat eius et rem amet est dolorum earum maxime vitae. Ducimus odio eos non, nostrum hic quod error iure nisi laboriosam ratione, non dolorem est veniam ut accusamus excepturi nemo, est quisquam magni quasi fugiat qui accusamus vitae corrupti doloribus.</p>
    </div>
    <div class="col-sm-4">
        <p>Nesciunt pariatur omnis laboriosam voluptates dicta, officia aliquam dolorem eaque quaerat culpa temporibus officiis. Dicta veritatis ullam, natus nesciunt porro distinctio culpa delectus optio exercitationem dolor obcaecati, sint fuga ut praesentium cupiditate rem obcaecati repudiandae cum perspiciatis? Accusantium qui et, laboriosam in maiores optio iure vero esse, velit beatae laborum porro nesciunt labore culpa ea sed veritatis voluptates dolores, iste incidunt omnis molestias reiciendis deserunt sint eaque id corrupti vero, soluta aliquid velit consectetur beatae facilis eos distinctio aperiam in voluptatum. Suscipit consequuntur adipisci quos itaque, distinctio ullam iste optio libero eaque porro deleniti mollitia iure doloremque, perspiciatis cumque tempora modi obcaecati necessitatibus?</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 %}