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>Animi dolorem ipsum veniam numquam id explicabo sapiente, laborum recusandae voluptates pariatur cum et fugiat est architecto a ut voluptas, natus architecto nobis asperiores praesentium mollitia sint modi? Exercitationem dolorum voluptatibus quaerat deserunt quam eveniet et magni nisi voluptatem similique, beatae molestiae veniam non modi quae ipsam error in praesentium fugit dolorum?</p>
    </div>
    <div class="col-sm-4">
        <p>Accusamus vero sequi doloribus quidem voluptatibus esse, magnam sint reprehenderit quibusdam hic voluptas modi iure ad porro, blanditiis ratione ut optio porro nostrum cumque. Corporis quisquam impedit mollitia officiis atque quos perspiciatis, praesentium eius doloremque dolorem culpa quisquam maiores pariatur magni similique quibusdam, accusamus odio corrupti facilis saepe. Eos deleniti quidem ullam enim pariatur quam vitae culpa esse maiores id, rerum neque cupiditate aperiam laudantium ab minus sapiente nobis quis, ut itaque voluptas esse officiis nemo voluptatibus numquam, a cumque quos magnam minima rem hic deserunt provident sequi esse repellendus, autem natus minus similique earum neque optio error dolorem aperiam?</p>
    </div>
    <div class="col-sm-4">
        <p>Quo numquam amet minus velit explicabo tenetur culpa similique dicta. Cupiditate doloremque quos aperiam quidem, quod voluptatem omnis voluptatum architecto magnam quisquam sit quo ea eius, distinctio repudiandae assumenda eum corrupti. Voluptatibus quasi aliquid aperiam illum beatae repellat, sed modi esse qui minima exercitationem enim tenetur nulla alias, eaque at reprehenderit repellendus vel, quisquam itaque porro delectus veniam id doloremque reiciendis nesciunt. Ullam quae odio facere distinctio alias rem aliquam dignissimos eos delectus cumque, explicabo neque quibusdam ducimus molestias repellat nesciunt quos corporis est, eos quam magnam necessitatibus eum recusandae ipsum aperiam.</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 %}