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>Nam deleniti maiores ratione quis, aut quaerat eius quisquam consequatur odio tempora molestiae commodi in? Illum veniam sapiente inventore incidunt, quasi accusantium facilis quidem voluptate soluta incidunt neque quo explicabo, maxime aspernatur soluta rem, inventore quas est quia a nulla voluptate minima culpa nihil? Animi ipsum mollitia aliquam odit suscipit error blanditiis, velit maxime fuga eos maiores magnam eius labore qui, atque delectus natus corporis quia perspiciatis quas architecto, eveniet unde vero fuga non iure atque, magnam expedita voluptatem odit dolore unde soluta quaerat eaque?</p>
    </div>
    <div class="col-sm-4">
        <p>Hic iste esse cupiditate, voluptatem dolor expedita eos deleniti sit suscipit placeat rerum. Molestiae earum a blanditiis velit quia, praesentium obcaecati voluptates rem maiores quaerat minus optio fugiat qui ducimus iste, autem atque maxime molestiae perferendis ab ipsa quaerat dignissimos, quod voluptatum numquam impedit laudantium eaque in animi recusandae nemo, nam quia unde corrupti dolorem nisi deserunt sed saepe quidem molestias.</p>
    </div>
    <div class="col-sm-4">
        <p>Ducimus dolorem fugiat laudantium corrupti perferendis repellendus impedit incidunt quis, inventore officiis unde quasi odit voluptatem expedita similique corrupti eos, cupiditate ab ullam cum aperiam nemo, consequuntur dolore similique cupiditate enim cumque harum corporis ad, qui impedit saepe dolores consectetur? Atque nesciunt repellat nobis animi at, ducimus numquam adipisci officia distinctio magni.</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 %}