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>Quas nulla iste corporis commodi vero illum quos voluptatem non, ratione necessitatibus tenetur nobis inventore doloremque? Officia corrupti fugit delectus adipisci accusamus quod harum, laborum quia non veniam praesentium tenetur cupiditate eveniet dicta maxime fugiat, minus autem maiores? Exercitationem nesciunt eius doloremque modi laborum praesentium ullam quasi?</p>
    </div>
    <div class="col-sm-4">
        <p>Possimus ratione delectus?</p>
    </div>
    <div class="col-sm-4">
        <p>Molestiae totam nisi in quia laudantium ipsam aliquid quidem veniam doloribus accusantium? Asperiores quibusdam atque natus adipisci odit soluta similique, earum unde quasi praesentium nemo dignissimos alias ducimus officiis, saepe hic et quibusdam vitae molestiae excepturi aliquid, iste nam nulla. Maxime tempore porro minus? Fuga eaque corporis similique aliquam deleniti accusamus cum voluptates voluptatum, quisquam odit rerum officia at commodi non reprehenderit, quod voluptatum assumenda animi minima vel tenetur cupiditate minus, autem nisi vero velit cumque expedita inventore laborum eveniet assumenda est distinctio?</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 %}