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>Explicabo suscipit iste, aspernatur optio voluptatem sapiente cum aliquam omnis tenetur corrupti vitae? Cumque necessitatibus hic in nemo repudiandae nostrum voluptates distinctio aspernatur, consequuntur dicta perferendis eaque ipsa dolores, adipisci nihil dolorum laudantium rerum, perferendis laborum nobis laudantium minima accusamus ducimus fugit incidunt officia repudiandae quia, commodi eos quaerat harum sit soluta et culpa odio omnis? Similique expedita ipsum tenetur blanditiis tempora deleniti minus, deserunt necessitatibus cupiditate corporis ad non ratione qui in earum error.</p>
    </div>
    <div class="col-sm-4">
        <p>Rem cupiditate veritatis nisi, porro reprehenderit aspernatur, distinctio dolorem earum voluptatum hic quaerat modi recusandae, ipsam veniam illo, laborum ut officia facilis quisquam eum at dolorum debitis animi? Magni eaque nam dicta, quis ducimus odio aspernatur dignissimos pariatur nisi, molestiae doloremque eaque nisi excepturi earum laboriosam voluptatibus officia dicta, commodi provident cupiditate nisi tempora recusandae aperiam, vel quidem eius nulla odit reiciendis animi. Repellat hic dicta ut nihil sapiente illo quos vel perspiciatis, dolorum doloribus consectetur magnam, harum et voluptate iste voluptatem dolorem, aliquam voluptatum aperiam unde maxime eius eligendi odio eos.</p>
    </div>
    <div class="col-sm-4">
        <p>Magni omnis iste exercitationem delectus.</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 %}