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>Fugit dolores repudiandae temporibus culpa fugiat nobis beatae suscipit, tenetur vero soluta sapiente provident debitis illo dolores blanditiis, molestias sit illum odio, illo debitis quos alias nesciunt voluptatum porro nostrum doloremque dicta nobis.</p>
    </div>
    <div class="col-sm-4">
        <p>Saepe molestiae repudiandae repellat magnam, quasi nam fugit in saepe necessitatibus quidem sed sapiente, porro eaque veritatis? Saepe a veritatis quas ad quod, sunt assumenda eveniet enim ab, iure eaque nulla perferendis ipsum neque animi est quas tempora? Eius dolorum architecto totam cumque similique illo, atque accusamus alias corporis est fuga reprehenderit, aperiam aut consequatur ab eius similique ad nemo non, omnis ullam iure blanditiis et consequuntur alias. Sit architecto illo, facilis quis molestiae nulla id sapiente dolorum?</p>
    </div>
    <div class="col-sm-4">
        <p>Sunt officia necessitatibus obcaecati quo rerum tenetur itaque, obcaecati nisi eum provident ducimus, molestias porro obcaecati atque. Fuga illum dolorem doloremque veniam culpa sed sunt vitae repudiandae? Beatae at facere voluptas ad nam voluptates commodi mollitia excepturi magni? Quis inventore pariatur numquam cumque accusantium nesciunt illo corporis ullam suscipit, aut ab autem atque praesentium fugiat eius quisquam reiciendis minus quasi, repellat suscipit aperiam animi est laborum esse doloremque distinctio harum dolorem a, nemo iusto ducimus temporibus, itaque distinctio alias earum maiores temporibus?</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 %}