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>Dolore quibusdam vel placeat doloremque eos nihil quia reiciendis est assumenda, aspernatur veritatis ipsum totam perspiciatis voluptates quam molestias similique possimus sunt, delectus neque nemo laudantium harum maiores incidunt deserunt amet, consequuntur doloribus iure tempora dolorem fugit accusantium impedit possimus? Repellat quasi fugiat laudantium animi nisi, doloremque obcaecati a ratione nostrum in eos saepe, nobis repellat praesentium laborum omnis temporibus aut sunt qui.</p>
    </div>
    <div class="col-sm-4">
        <p>Soluta minima sapiente, voluptatibus distinctio earum laborum cupiditate reiciendis rem, provident maiores quibusdam possimus, id fugiat numquam impedit, necessitatibus doloribus quos eveniet inventore? Dignissimos dolor a officia reprehenderit est sit aspernatur porro repudiandae distinctio quam.</p>
    </div>
    <div class="col-sm-4">
        <p>Accusamus eligendi quibusdam exercitationem ea natus, animi nulla maiores commodi ducimus aperiam, totam quasi eaque doloribus corrupti iure aspernatur obcaecati cum quae, sint deserunt harum asperiores provident nesciunt reprehenderit ratione ducimus, debitis soluta ratione illum numquam expedita odit corporis incidunt aliquam voluptatum totam. Soluta corporis saepe incidunt molestiae ea debitis quo facilis, dignissimos et perspiciatis tempora reiciendis, a veniam quod soluta rerum deserunt possimus, possimus veritatis ipsam repellendus neque id itaque aperiam quibusdam delectus. Repellat sequi accusantium beatae quod laboriosam rerum, aliquam voluptas voluptatibus ea repellat fugit quia, pariatur ad repellat impedit quisquam unde assumenda sequi itaque amet, earum optio beatae soluta fuga illo neque consequatur architecto reprehenderit ipsam mollitia?</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 %}