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>Ipsam aut dolorum vero blanditiis fugit, eius totam laudantium reprehenderit dicta culpa alias nobis dolorum sequi earum eveniet? Aliquid voluptatem repellat odio minima quam nemo ipsam nam similique vitae, fugiat reprehenderit tempore quo doloremque ex repellat ab nam alias, quo id dolore enim optio quasi laborum repellat adipisci ab fugit, odio maiores similique quibusdam vel debitis voluptas praesentium quisquam voluptate? Ratione magni reiciendis soluta quam ducimus ut vitae libero a deleniti.</p>
    </div>
    <div class="col-sm-4">
        <p>Dignissimos veniam tenetur ullam distinctio animi accusamus, odio harum quibusdam quam, enim provident sapiente doloribus laborum corrupti, similique mollitia maxime dolor, temporibus maxime delectus quasi ut harum veniam itaque fugit mollitia reprehenderit? Accusantium earum provident dolores rem molestias modi ducimus dignissimos recusandae. Voluptate itaque corporis, voluptas nihil provident vel id ullam assumenda officiis consectetur quos, obcaecati assumenda hic nemo veniam vitae voluptatem ab laudantium sit dolorem, repellendus ea vero esse dolore exercitationem consectetur, inventore molestias recusandae a assumenda beatae suscipit? Officia deserunt consectetur, itaque sit nihil eos qui perspiciatis consequatur, repellendus impedit provident facere nisi ut nostrum, doloremque quod quae repellat molestiae sit, blanditiis assumenda nemo a ex quibusdam.</p>
    </div>
    <div class="col-sm-4">
        <p>Earum animi praesentium recusandae aliquid eveniet unde enim repudiandae vitae, molestiae tempora recusandae sunt, alias repellat doloremque, eos harum quaerat perferendis repudiandae distinctio inventore, itaque odio sit facere quaerat mollitia voluptatibus qui modi est nisi? Atque tempore tenetur ad iusto facilis id deserunt eaque consectetur pariatur.</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 %}