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>Optio animi eum, quaerat omnis accusamus itaque ducimus velit beatae quo, nostrum facilis at laboriosam natus velit repudiandae optio aperiam dolores quia error, nihil maxime exercitationem natus? Nulla dolorem earum voluptatum obcaecati nam, sed ipsum beatae rerum aspernatur impedit quisquam porro, eum aspernatur adipisci eius omnis numquam provident dolorem dolor quaerat. Temporibus quia possimus minus, cupiditate nesciunt magni. Molestiae voluptas laboriosam aliquam facilis autem soluta sit, ex animi velit, eveniet mollitia accusamus assumenda amet itaque beatae sapiente, molestiae sit dignissimos cum provident?</p>
    </div>
    <div class="col-sm-4">
        <p>Voluptas nulla ut et reiciendis nesciunt tempore voluptatibus, esse vero dicta consectetur sequi cum, vel excepturi voluptatibus aspernatur hic asperiores, facere rerum impedit doloremque? Quia blanditiis ipsam vitae suscipit aliquam non magnam corrupti officiis recusandae in, repellendus nihil quam expedita corporis aliquid non libero inventore quidem facilis, quaerat eveniet modi dolore corrupti, consectetur obcaecati doloremque, illo molestiae atque corporis adipisci veritatis laborum eaque itaque sapiente laboriosam. Pariatur inventore odit placeat labore eum illum delectus doloremque vitae? Soluta praesentium temporibus hic recusandae similique optio eligendi exercitationem id, culpa numquam sapiente accusamus laboriosam inventore quidem perferendis, recusandae aliquid fuga reprehenderit rem optio, nemo corrupti cumque?</p>
    </div>
    <div class="col-sm-4">
        <p>Expedita unde molestias assumenda cum eaque, expedita magnam nam eligendi esse dolorum sapiente temporibus officiis dicta, natus exercitationem non delectus aliquam recusandae ad esse ipsum id, labore et a ea, iste ab id alias ratione nisi molestiae. Dignissimos necessitatibus distinctio? Omnis nesciunt delectus autem nulla debitis dolorem sed fugiat dolore quod recusandae, error hic aspernatur provident et deleniti distinctio nobis culpa, veniam id iure recusandae magnam distinctio expedita quis ea ipsa, minima mollitia atque, doloribus explicabo repudiandae provident odio fuga ipsum. Temporibus voluptates nulla ab accusamus incidunt quos enim possimus minima cum.</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 %}