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>Inventore doloremque nostrum iste dolores ad, laudantium ipsum doloribus, similique veritatis tempora quibusdam dignissimos accusamus distinctio aliquam voluptas quisquam laboriosam?</p>
    </div>
    <div class="col-sm-4">
        <p>Corporis reprehenderit hic nulla repellat, debitis repudiandae ea ullam reprehenderit voluptates ex saepe fugit possimus, doloremque similique aliquid explicabo iste voluptatibus sed nihil at a veniam, voluptatem harum eveniet ullam quod qui necessitatibus vel cumque ab, incidunt modi excepturi alias consectetur ex dolore et at architecto expedita ipsam. Distinctio eius cumque consequatur quas ratione assumenda suscipit praesentium porro, expedita quas porro natus corporis libero saepe cum ab consequuntur fuga harum, consequuntur nobis consectetur omnis laborum esse veritatis quasi ipsum dolorem facilis adipisci, architecto nostrum consequuntur incidunt repellat dicta doloremque. Quasi minus totam non soluta sunt inventore accusamus amet quidem, optio dolorem sit quae, a nam architecto ab similique fugiat vitae atque nisi, sint neque temporibus ex animi voluptate quo dicta alias? Maxime quis sequi vero nesciunt ullam, corrupti quam perferendis tempora ducimus, praesentium et facere culpa libero perferendis beatae laudantium aliquam exercitationem sint eum, vel ex sed voluptatem ad cum, eligendi dolorem atque voluptate recusandae dolores veritatis ratione facere delectus?</p>
    </div>
    <div class="col-sm-4">
        <p>Nihil velit illum tenetur odit magnam repellendus maxime sunt, earum itaque officia natus deleniti quam, expedita facere eaque architecto cupiditate culpa omnis iusto neque placeat, sequi quasi laborum repudiandae officia voluptatum praesentium fugit sapiente maiores. Rem perferendis vitae fugiat reprehenderit laborum voluptatum ducimus, temporibus dolore impedit hic asperiores vel laudantium magni ipsam aliquid doloremque. Illum atque perferendis distinctio quisquam nisi, exercitationem nam et perspiciatis nostrum officiis culpa labore fugiat, rem quia odit blanditiis maiores velit iste minima libero voluptates rerum?</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 %}