Fork me on GitHub

Opening a Dialog

view code

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()
/static/images/static_dialog.png

A simple static Dialog

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>Labore esse temporibus eos, molestias reprehenderit est ducimus quaerat voluptatibus corrupti at ipsa, laboriosam quis non temporibus asperiores id quaerat quasi omnis ipsam, voluptatibus tenetur facilis non magnam maxime officia ducimus, ipsa quis magnam fugiat vel dolorem omnis quidem. Explicabo asperiores ratione id exercitationem ad maxime adipisci, vero vel natus incidunt ea ullam quod non quasi ab autem ipsam? Nostrum neque omnis ratione distinctio autem error aliquam, tenetur expedita non sit vel voluptatibus.</p>
    </div>
    <div class="col-sm-4">
        <p>Tempora illo at sapiente fugiat repellendus unde magnam laudantium modi pariatur reiciendis, iste obcaecati sunt? Vel error dolore ipsum ratione, omnis exercitationem similique dolor quasi repudiandae obcaecati nihil aut autem recusandae eos, illo quas eius possimus numquam molestiae reiciendis perspiciatis magnam officia dolores, suscipit ut asperiores quam ad itaque velit, reiciendis perspiciatis laudantium sit quia molestias maxime voluptatum saepe sequi. Quas dignissimos ipsa pariatur laudantium reiciendis placeat fuga culpa?</p>
    </div>
    <div class="col-sm-4">
        <p>Cupiditate dolor laborum. Impedit dolore ipsum sint voluptatum reprehenderit esse. Asperiores quasi itaque voluptatem voluptatibus, iure neque accusamus libero voluptas, repellendus adipisci voluptatibus alias ratione harum rerum aspernatur excepturi illo nostrum nisi, error a minus consectetur, vero vitae eum libero rerum culpa saepe aliquid laborum doloremque fuga rem. Fugiat odio dolores sed nihil eius nemo alias unde praesentium atque ut.</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 %}