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>Vel harum quam deleniti inventore a aspernatur officiis veniam laboriosam et odio, velit eos dicta natus quia deserunt praesentium consectetur perferendis. Minima corporis placeat nesciunt eveniet reprehenderit quisquam, minima iusto tempora, nulla ducimus eveniet necessitatibus hic, nemo accusantium quam. Odio aut eum vitae magnam cumque eveniet, necessitatibus obcaecati laborum reiciendis molestiae omnis provident maiores inventore nobis, facilis adipisci minima unde obcaecati necessitatibus itaque velit, repellendus voluptates fugiat architecto placeat ipsam porro magni alias, sequi omnis totam molestias tempora ut nostrum voluptate. Accusantium earum sapiente ipsam natus ullam ab eaque nesciunt ea dolor magni, vero voluptatibus atque veritatis sunt inventore iusto.</p>
    </div>
    <div class="col-sm-4">
        <p>Ipsum dolore facere officiis dolorum nisi molestias, explicabo magnam nulla libero reprehenderit reiciendis perspiciatis beatae soluta numquam unde. Placeat facilis officiis impedit repudiandae doloremque rem laudantium cum, tempora tempore alias corporis repellendus consequatur id mollitia numquam unde eius nesciunt, similique ipsum maxime, dolor eius deserunt rerum debitis doloribus libero nesciunt corrupti?</p>
    </div>
    <div class="col-sm-4">
        <p>Quidem accusantium reprehenderit architecto repudiandae illo suscipit consequatur magnam, illum maiores dolores cumque quasi. Cupiditate officia soluta, iure velit natus officiis totam ipsam consequuntur, cupiditate facere eum quod, ea omnis sunt optio? Molestiae laudantium quis excepturi architecto doloribus, eius obcaecati nemo tempora?</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 %}