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>Laboriosam adipisci laborum atque ipsum placeat cumque sapiente magnam reiciendis, similique maxime quaerat ipsa, ad obcaecati beatae voluptatibus veniam enim laboriosam tempora repellat, magni eos ratione ipsa minima amet autem nemo pariatur, blanditiis nam quo est in vitae quis? Blanditiis praesentium ab atque at aperiam vitae a tempora officiis, id doloribus neque ducimus, quas accusantium inventore animi voluptatibus, quas dolorem maiores hic aliquid similique sit eos perferendis maxime tenetur vel.</p>
    </div>
    <div class="col-sm-4">
        <p>Dolorum commodi nemo ipsa culpa hic qui, doloribus labore omnis consectetur. Officia placeat ab velit sed voluptates perspiciatis delectus nobis. Inventore provident rem voluptas delectus maiores itaque illum, placeat reiciendis consequatur nisi officia quibusdam quis similique laboriosam iusto, repellendus ullam impedit magni corporis reprehenderit nesciunt magnam sint officiis praesentium pariatur, magni rerum modi magnam atque voluptates nesciunt ipsam accusantium, perferendis dolore labore ea?</p>
    </div>
    <div class="col-sm-4">
        <p>Nemo aperiam temporibus tenetur voluptas et aspernatur consectetur sapiente officiis voluptate, tenetur optio obcaecati, quod ipsum facilis qui quidem aperiam nobis atque libero provident quam, consectetur iure voluptas ratione voluptatum neque asperiores. Ullam neque consequatur soluta praesentium ipsa eligendi distinctio perferendis quam officia error, nemo minima doloremque, molestias exercitationem quo, eveniet eaque tempora, animi assumenda alias voluptas quia aspernatur ullam corporis. Tempora tenetur dicta sit laudantium eum atque quam ex beatae a? Recusandae vitae quia sunt, cupiditate sint rem hic ad praesentium ducimus quas harum, culpa quam omnis dolorum recusandae non rem aliquid, quas molestiae sunt cupiditate autem suscipit modi, possimus ab quibusdam?</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 %}