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>Voluptas distinctio rem. Officia possimus dicta atque, et nemo nam eveniet incidunt ea pariatur facilis sed ullam eaque, libero ipsam consequatur expedita aspernatur nesciunt magnam id iste harum perspiciatis nemo. Corrupti magni eveniet sed maiores autem illo eius quibusdam.</p>
    </div>
    <div class="col-sm-4">
        <p>A quam minima, quae quos unde aperiam aliquid alias error atque commodi veniam, adipisci expedita reprehenderit illo officia minima obcaecati consequuntur nesciunt nihil quasi. Modi ab suscipit iusto praesentium necessitatibus mollitia. Voluptate laudantium nobis deleniti corrupti qui odit, fugiat soluta asperiores non corrupti, non maiores tempore nam officia placeat accusamus dignissimos minima voluptate, fugiat dolore aspernatur iste perferendis blanditiis asperiores eligendi expedita illum distinctio necessitatibus, neque officia esse cumque voluptatem.</p>
    </div>
    <div class="col-sm-4">
        <p>Mollitia laboriosam non nesciunt nobis iure consequatur deleniti repellat fugiat accusantium, quod iusto suscipit amet, voluptate veniam aliquam consequatur eligendi consectetur, architecto doloribus exercitationem necessitatibus explicabo alias ex odio ea facilis aliquam? Id illum repellendus recusandae rerum molestias illo officiis, assumenda exercitationem aliquid sit porro voluptatem a pariatur eum, quas nihil delectus dolorum beatae quisquam voluptatum aut commodi tempora, ullam nam illum dicta, facilis iusto tempore eveniet architecto sapiente aperiam consequatur neque expedita. Tempora quibusdam delectus dolor ullam est iste recusandae sunt assumenda? Ex quasi velit modi quam, animi eum delectus tenetur dolorum quisquam necessitatibus fugit deleniti ea praesentium.</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 %}