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>Sunt unde tenetur, libero iusto voluptatum dolore expedita vero, atque dolore sit non quo vero aut nobis, tenetur perferendis magni rerum repellat recusandae aut?</p>
    </div>
    <div class="col-sm-4">
        <p>Quaerat ipsa pariatur tempora fugit et nihil culpa perspiciatis vitae, nam odit molestias minima? Minima voluptate eos assumenda quidem odio dicta, similique ipsum ullam nisi provident voluptates doloribus cumque perferendis harum dolorum, aspernatur esse porro culpa dolorum ad quod impedit, esse hic iusto necessitatibus expedita quidem nulla, quaerat doloribus architecto tempore eligendi itaque dignissimos qui aperiam? Explicabo quae vel architecto eos, ipsum voluptatibus dolores ut quis similique doloremque esse harum, perspiciatis possimus at nihil optio natus, debitis corrupti laboriosam suscipit, vitae deserunt maiores eveniet eum dicta officia ipsa? Minus quia tempore cumque saepe laborum eos provident, non quis ut quos iure in voluptate quidem rem nesciunt at consequatur.</p>
    </div>
    <div class="col-sm-4">
        <p>Odit placeat obcaecati id laborum quasi eum eius explicabo, animi autem esse delectus quisquam vel laudantium labore dolorum, placeat illum numquam modi consectetur vitae dignissimos magni exercitationem cumque, exercitationem ab non placeat perspiciatis voluptates libero consectetur, est sequi aspernatur porro ad iusto libero architecto delectus? Iste itaque placeat sed temporibus voluptatum obcaecati quod quidem debitis officia, fuga quasi laborum obcaecati facilis quod ipsam minus pariatur, illo voluptates illum modi ipsam aperiam assumenda aspernatur harum, reiciendis minus autem ea tempora cumque totam eaque esse quae.</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 %}