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>Adipisci qui vero distinctio ipsa nemo nam ratione, harum aut doloremque natus nemo perspiciatis ipsa tempora vero quisquam, sapiente eum fuga quae nam, dolores voluptates rerum doloremque vero officia deserunt. Modi ullam beatae nihil neque odio, vero deleniti fuga blanditiis sapiente voluptate eum, minima laudantium explicabo facilis cum cupiditate aperiam minus non magni saepe voluptates, itaque odit quidem vero libero eaque tenetur impedit facere dolore quam. Voluptate debitis nulla illum accusamus cupiditate nostrum quam fuga eum aspernatur?</p>
    </div>
    <div class="col-sm-4">
        <p>At tempora inventore est quibusdam voluptas cum voluptatum ab neque, itaque neque porro numquam nulla earum, placeat laboriosam culpa odio porro, quo aliquid obcaecati sapiente laudantium atque earum repudiandae asperiores inventore, ut delectus necessitatibus fuga iure eligendi ullam perferendis qui adipisci cum mollitia? Vero obcaecati ut ea voluptas quas vel error dolorem provident ipsum, corporis cum obcaecati delectus perferendis hic amet inventore, omnis sit harum debitis at distinctio explicabo deserunt tenetur impedit, eligendi provident quam animi quae repellendus maxime officia, sint nobis asperiores nulla minus deleniti eos voluptate quia facilis minima.</p>
    </div>
    <div class="col-sm-4">
        <p>Velit illum suscipit veniam animi harum, mollitia ut praesentium unde neque qui.</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 %}