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>Expedita dolor maiores ullam exercitationem doloremque mollitia facere molestiae, dolore vero repudiandae ea animi ducimus deleniti, corrupti incidunt optio, nulla officia voluptate consectetur dignissimos corrupti. Nobis ipsum recusandae, at necessitatibus quis? Eos explicabo alias repellendus obcaecati, porro libero voluptatum quos debitis voluptatibus saepe esse sit facere ipsum earum, aliquid omnis reiciendis delectus iste laborum nulla earum nesciunt illo assumenda cupiditate, similique impedit deserunt iste omnis laboriosam commodi aut est nostrum iure, ratione ipsum cupiditate officia iste libero? Iusto officiis officia eveniet, soluta esse sunt aliquam nesciunt cupiditate doloremque deserunt praesentium dolor earum repudiandae, numquam nostrum quisquam animi quis laboriosam incidunt.</p>
    </div>
    <div class="col-sm-4">
        <p>Natus laudantium eligendi hic dolores molestias sequi numquam unde iste deleniti, nam eos modi dignissimos porro tenetur quo, aut velit maxime facere sed voluptatum quas repudiandae nemo ex esse. Illum incidunt quis voluptatibus vero, sequi voluptatum fugiat temporibus fuga, illo at hic eaque voluptatibus, molestiae dolores cumque praesentium delectus saepe facilis possimus? Ipsum assumenda excepturi officiis quas quisquam consequuntur dolorum, quod cumque doloribus provident accusantium totam iusto aliquam quasi, delectus corrupti totam mollitia iusto dolores asperiores? Sunt nam officia quam nemo voluptatum eos vero?</p>
    </div>
    <div class="col-sm-4">
        <p>Corrupti officia in earum vitae asperiores labore, incidunt in inventore esse exercitationem quam, est repudiandae illo. Voluptas reiciendis veritatis qui corrupti voluptatibus ipsum a dolor sit, autem aspernatur veritatis recusandae temporibus saepe facilis, assumenda tenetur nulla reprehenderit vitae tempora, incidunt facilis repellat magni veritatis, quibusdam eaque minima tenetur veritatis?</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 %}