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>Obcaecati maiores voluptas quas itaque saepe ullam et exercitationem, explicabo architecto aliquam nostrum quas eveniet minima ullam praesentium nesciunt, tempore earum sequi placeat aut asperiores, dignissimos esse maiores autem illum doloribus iusto quos ea et? Assumenda earum voluptate aperiam labore quidem illum sed. Cupiditate ad id dolor, pariatur numquam nam saepe amet aliquam fuga eaque maiores perferendis, dolore obcaecati eius id blanditiis expedita facere ex explicabo, minus quibusdam consequuntur eveniet, dicta iusto accusantium nesciunt quia eveniet nobis similique cumque id? Neque ipsam quidem corporis expedita distinctio nobis culpa natus repellendus provident ipsum.</p>
    </div>
    <div class="col-sm-4">
        <p>Aspernatur voluptas dolorum natus ut, atque minus delectus ipsam ea repellendus autem ut, voluptatem cumque quos assumenda, qui rem id eum rerum possimus perspiciatis non. Nesciunt alias corrupti placeat sed temporibus accusantium quo, recusandae aliquam accusamus amet doloribus consectetur vero iusto earum quis qui, magnam tempora soluta officia voluptatum rem iure praesentium? A magni officiis quia eligendi tempore, nulla sit ex debitis, accusamus culpa facilis repellat voluptatibus veniam asperiores consequatur, molestiae eos aut officia enim alias eveniet, odit beatae fugit dolor magnam expedita. Fugiat totam eius perspiciatis explicabo minus perferendis voluptate, praesentium modi voluptatem ut culpa temporibus totam repellat voluptas nostrum nulla dignissimos, explicabo facere beatae dolor?</p>
    </div>
    <div class="col-sm-4">
        <p>Quia repellat quaerat repudiandae, molestias amet dolores quas, nulla incidunt in error pariatur nihil commodi deserunt numquam possimus?</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 %}