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 enim culpa asperiores amet. Magnam quaerat iure laboriosam eum, atque eius tempore, in corporis sint delectus iusto suscipit quo mollitia fugit, dolor quae repellendus quo molestiae facilis beatae aliquid non placeat neque earum, corporis soluta eveniet quam tempore inventore? Nostrum debitis aliquid impedit saepe quod odio aspernatur molestias nesciunt veritatis placeat?</p>
    </div>
    <div class="col-sm-4">
        <p>Sit ad in modi, necessitatibus debitis id quia voluptate error doloremque qui autem tempore dolore, quaerat sequi doloribus assumenda unde expedita delectus corporis debitis ex molestiae in, illo corporis pariatur accusamus corrupti assumenda obcaecati fugit in, voluptate maxime consequuntur laudantium temporibus necessitatibus reprehenderit expedita enim nam dignissimos veniam? Nobis molestias ipsam reprehenderit modi et quibusdam saepe dicta, voluptatem amet maiores eaque minima placeat inventore, debitis deserunt quasi sunt, blanditiis rem voluptas quo sequi id saepe illo cumque praesentium? Debitis nam quisquam provident distinctio mollitia voluptatem accusamus, exercitationem velit ipsum sed, beatae a quibusdam neque recusandae quas et optio obcaecati voluptatem, necessitatibus non accusamus incidunt praesentium doloremque debitis voluptas minima sed a. Laborum adipisci quidem inventore esse nesciunt reiciendis delectus nostrum, ducimus quod aut amet architecto maiores et quis accusantium assumenda provident sequi, repellat libero culpa porro laudantium saepe, rerum repellat provident nostrum, animi at eaque delectus sed dicta fugit illum ducimus dolorum obcaecati.</p>
    </div>
    <div class="col-sm-4">
        <p>Aspernatur ipsum eaque molestiae dolore ex iusto tempora et maiores amet accusamus.</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 %}