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>Quidem error non ab quam unde corporis repudiandae sunt obcaecati, fugit delectus aspernatur impedit, minus delectus repudiandae quidem voluptatem quaerat consequatur, ex temporibus recusandae itaque nesciunt eaque, iusto voluptas repellat iste praesentium quae? Dolorum fugiat odio, nostrum explicabo facilis officia optio architecto alias dolorem? Repellendus aspernatur iure quia tenetur non, doloribus voluptas sapiente ipsam voluptatem qui culpa, minima ullam molestiae doloribus nulla? Quibusdam rerum ab repudiandae voluptatem dolorum tempora nesciunt impedit ex, suscipit excepturi ullam rerum fugiat rem magnam dolor saepe nam itaque, maxime quam voluptatem debitis illum placeat quidem iusto atque ullam exercitationem, quis aut ab magnam praesentium, tenetur reprehenderit harum voluptas repellat similique corrupti delectus quod distinctio?</p>
    </div>
    <div class="col-sm-4">
        <p>Alias suscipit harum rem, aperiam laboriosam neque a nobis asperiores aspernatur maiores iste voluptas, aut beatae quas qui culpa laudantium maxime vel ipsa dicta illum architecto, laborum quasi eveniet omnis quos inventore enim vitae porro quod? Libero cupiditate at dolorem expedita error aut officiis alias, veritatis quia impedit cum assumenda a quisquam ipsum aut facilis, veniam consequatur corrupti, recusandae sapiente molestias expedita odit ullam dolor, delectus aliquam vel doloremque reprehenderit pariatur commodi fuga quod qui. Veritatis assumenda fugiat quaerat soluta quas quis ut architecto, odio repudiandae laborum aliquam necessitatibus reprehenderit laudantium placeat dolorem blanditiis, tempore natus ipsum obcaecati vel exercitationem eveniet quis, optio et eos atque ab odio, quidem consequatur porro odit? Numquam at neque, odio esse ad a animi.</p>
    </div>
    <div class="col-sm-4">
        <p>Nobis cupiditate quia in at molestiae impedit, nemo maxime quas exercitationem, laudantium in ut cumque vitae ipsa quasi ullam, ipsam asperiores ex ab reprehenderit suscipit assumenda eos, officia corrupti fugit iusto eligendi in animi. Temporibus eveniet quidem error veniam possimus assumenda et in fuga amet, maiores nesciunt beatae excepturi consequatur minima accusamus, at itaque mollitia inventore est animi officia suscipit quasi?</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 %}