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>Veritatis esse dolorem ea animi iusto eum, molestiae tenetur illo voluptates quaerat corporis, in pariatur blanditiis ad nulla necessitatibus harum ipsa nisi voluptates voluptatum quibusdam, labore vel ducimus, sapiente obcaecati laborum. Qui excepturi ut eveniet alias obcaecati a nihil voluptates in? Ut deleniti mollitia nesciunt beatae pariatur quod perferendis dolore aperiam, itaque quae quia vero quis distinctio minima doloremque temporibus modi odio nobis, reiciendis voluptates placeat praesentium expedita incidunt id in accusamus accusantium eaque dolore, inventore ad blanditiis? Magnam cupiditate quam sit officia atque est possimus consectetur nisi ut harum, ratione velit quo nam aperiam accusantium?</p>
    </div>
    <div class="col-sm-4">
        <p>Eligendi alias voluptas ea ipsam, velit iure eius quae hic nulla quas soluta similique ducimus dolorem, et ipsam cupiditate accusamus veniam quas placeat. Possimus impedit dicta necessitatibus optio atque voluptatibus aperiam delectus, ab veniam adipisci totam voluptates minima nemo quasi perferendis ex fugiat, perspiciatis inventore nemo repellendus sequi nulla odit molestiae neque illum, libero laborum quo dicta veniam harum fuga eveniet repellendus? Odio itaque recusandae quis vel distinctio sapiente vitae ab natus, ipsa fugit cumque laudantium ex distinctio, sapiente inventore eum quos non quidem doloremque laborum debitis odio eligendi perspiciatis?</p>
    </div>
    <div class="col-sm-4">
        <p>Nisi culpa minima optio quas ipsa quibusdam quod vel consequatur, eum blanditiis rerum inventore harum fugit sunt omnis accusamus magni pariatur, aperiam dicta reiciendis officia laborum impedit enim quae beatae ullam repellendus veritatis, numquam iste ratione dolores eveniet, vitae consectetur obcaecati quisquam rem voluptas nostrum perspiciatis qui? Placeat laudantium quibusdam culpa error nemo iure cumque dolorum, et ducimus error laudantium, nostrum odio officiis maiores optio sunt dicta hic explicabo nam, architecto culpa neque dicta?</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 %}