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>Odio impedit repellat dolorum, laboriosam provident animi sapiente modi voluptatum, ipsa et at voluptas? Excepturi laborum cum assumenda id repellat nobis libero eveniet voluptatum dolores illum, vitae illum facere quaerat corporis cupiditate explicabo distinctio. Vel quidem nostrum laudantium porro dolorum deleniti odio, qui illo expedita consectetur quasi sed placeat fugiat modi nam, id dolorum porro aperiam architecto consequatur facilis nobis, ipsam libero laboriosam saepe voluptate.</p>
    </div>
    <div class="col-sm-4">
        <p>Amet excepturi rerum illum. Iste deleniti et maiores ex consectetur, quidem ut tenetur ipsa qui suscipit adipisci inventore mollitia est, maiores consequuntur minima nam esse perspiciatis.</p>
    </div>
    <div class="col-sm-4">
        <p>Ut aliquid quis cupiditate quaerat nesciunt, nesciunt doloribus iusto maiores aperiam similique blanditiis libero sequi voluptate facilis, explicabo voluptatibus nostrum esse at cum modi quae numquam aliquid, officia quidem similique error culpa, possimus nisi quis fugit ipsam sed non pariatur? Deleniti dolorem ipsum tempora dignissimos autem illo delectus, doloribus vel accusamus atque id omnis aliquid perferendis, mollitia quas itaque corporis ad consequuntur provident. Eaque molestias odio officiis. Excepturi amet dicta soluta, explicabo numquam iste voluptates inventore quam, ab enim eaque voluptate adipisci dolores tempora deserunt iusto rerum culpa?</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 %}