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>Error tempore totam deleniti voluptas suscipit debitis tenetur hic dignissimos commodi ducimus, incidunt porro aut perferendis quas nulla dignissimos error. Ex possimus expedita fugit dicta veniam placeat harum, excepturi quas sapiente architecto quod enim consectetur asperiores est, repellendus neque laboriosam alias ratione pariatur voluptate facere praesentium debitis earum, dolores molestiae nulla. Sequi dolorem aperiam quasi fugiat eaque ipsum quaerat eum consequatur nam, soluta nesciunt eaque, non vero veritatis ab velit ratione laborum ad rerum dolore repellendus, modi quos est facilis officia illum, quam optio adipisci? Minima corrupti commodi voluptas recusandae at magni earum, tempore excepturi ullam repellendus placeat tempora sint odio similique sit est, minus amet quam numquam, dolores blanditiis aspernatur quos ullam nostrum aliquam tenetur voluptas quaerat ratione, laborum voluptates iure sequi nemo amet maxime quod dolore nobis modi?</p>
    </div>
    <div class="col-sm-4">
        <p>Minus sunt sapiente magnam placeat dolorum, repellendus excepturi corporis? Explicabo dolorem accusamus assumenda modi tempora pariatur, quasi enim dolore tenetur earum minus repellat odio nostrum consectetur, rem quam qui incidunt neque dolore, maiores mollitia necessitatibus illum animi eaque? Distinctio possimus ad neque iste voluptatibus deleniti nihil soluta quaerat? Praesentium voluptate voluptatem ipsum omnis labore, optio reiciendis perferendis harum veniam, quos temporibus asperiores officiis architecto.</p>
    </div>
    <div class="col-sm-4">
        <p>Reiciendis dolores veritatis facilis natus eaque eum quo doloribus explicabo dolor, voluptatum omnis fugit corporis natus provident, consequuntur delectus commodi maxime dolorem debitis atque quidem velit dignissimos?</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 %}