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>Voluptate sunt dolores eligendi dicta dolore, dolores error iure delectus, asperiores odio quas facilis esse nesciunt eaque aperiam ad expedita. Aspernatur excepturi perspiciatis quasi consequatur quae exercitationem, amet minus qui expedita nisi saepe iusto error ipsum est, ea rem veritatis molestiae laborum repudiandae? Rerum vel rem temporibus quos in repellat incidunt natus quia hic, ratione velit id optio tempore provident eaque possimus.</p>
    </div>
    <div class="col-sm-4">
        <p>Iure veniam eos a dolores sed, odit sequi ab, suscipit sapiente voluptates voluptatibus ex amet ab minima, dolor voluptatibus mollitia enim ratione possimus sed nemo aut maxime fugit qui. Perferendis dicta sed quam tempora officiis dolor consectetur asperiores optio ad, totam exercitationem sequi odit, velit commodi excepturi magnam sint vitae autem ratione? Suscipit accusantium dicta facere, sint voluptatibus ut minus possimus obcaecati ratione veniam. Provident odio maiores quis hic nihil velit earum accusamus praesentium fugit, aperiam eius expedita beatae impedit illum doloribus excepturi temporibus sapiente consequuntur, molestias cupiditate accusamus deserunt incidunt libero voluptatibus, perferendis beatae modi aliquid quisquam harum asperiores dolore, fugit ipsa nulla?</p>
    </div>
    <div class="col-sm-4">
        <p>Sit cumque earum ipsam labore eaque quibusdam vel ullam expedita similique repudiandae, amet nostrum saepe minus quae facilis, corporis cum obcaecati quisquam dolorum aliquam nostrum voluptatem, recusandae distinctio exercitationem rem eveniet velit quaerat ratione. Delectus minima et quibusdam eos repellendus esse distinctio, deleniti in voluptas nostrum officiis fuga officia alias, suscipit in quam harum aliquid neque voluptatem, ullam ut accusantium similique omnis neque maiores quis soluta dolor totam? Hic numquam nihil harum nemo, praesentium illo iure beatae soluta, minus vero natus nulla ad alias voluptates ex?</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 %}