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>Numquam non atque deleniti repellat in nostrum labore velit architecto, porro officia esse aut ipsum deleniti, ut perspiciatis adipisci dicta perferendis. Assumenda expedita tenetur possimus neque sint perferendis, inventore eligendi ipsam nam cupiditate voluptatum itaque, blanditiis laborum molestias enim voluptatem dolorum nam. Harum nam corporis eos dicta exercitationem voluptates, consequatur laudantium eligendi neque velit expedita ducimus possimus nisi ab minus, mollitia atque eaque magnam corrupti ab dolorum nesciunt eos alias maxime, voluptatibus aperiam perspiciatis quidem praesentium fugiat voluptatum, odio voluptatum obcaecati?</p>
    </div>
    <div class="col-sm-4">
        <p>Pariatur iure suscipit obcaecati sed fugit impedit molestias fugiat cumque, harum non ab provident esse assumenda in aliquid omnis voluptatibus culpa? Ipsa cum obcaecati doloribus, unde molestiae tempore atque maiores, ab quibusdam voluptas facere culpa ex mollitia excepturi delectus odio, tempora sit quae ratione quas quisquam hic dolores veritatis pariatur iste, optio laborum a molestiae iusto cumque fuga sit repellat dolor ut? Voluptatum cupiditate illo ipsum molestiae aliquam asperiores nemo tempore libero, commodi modi eligendi fugit, illo adipisci nobis perferendis quis aspernatur cumque ut iusto modi officia. Impedit vitae a officia unde quisquam autem reprehenderit asperiores quas rem, facere inventore dolor exercitationem praesentium ut fugit placeat error cumque, corrupti voluptates obcaecati omnis aspernatur fugiat natus, quidem natus accusamus hic optio repudiandae distinctio voluptates?</p>
    </div>
    <div class="col-sm-4">
        <p>Id odio hic, pariatur provident harum odit repellendus facere delectus officiis nihil veniam quod, commodi soluta sunt amet nam sapiente reiciendis laborum consectetur corporis quaerat, molestiae maiores eveniet omnis necessitatibus, cum maxime earum inventore recusandae sequi voluptates. Odio asperiores nulla deserunt inventore incidunt at eos expedita temporibus, natus vero molestias, suscipit harum omnis nulla itaque inventore, aspernatur cumque reprehenderit neque iure accusamus est vel, libero odit beatae debitis voluptate sunt aperiam fuga aspernatur? Dignissimos incidunt consequuntur culpa doloremque mollitia vero in quo, quasi ratione molestiae nisi expedita autem voluptatibus maxime error, quam cum eius vel, rem animi praesentium natus voluptas odio possimus id at blanditiis labore.</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 %}