In the following example, we build a Dialog() object providing some custom options; then, we use it to open a modal dialog and load it from the specified url.

For demonstration purposes, we also subscribe the 'created' notification.

<script language="javascript">

    $(document).ready(function() {

        dialog1 = new Dialog({
            html: '<h1>Loading ...</h1>',
            url: '/j/object/',
            width: '400px',
            min_height: '200px',
            title: '<i class="fa fa-calculator"></i> Selezione Oggetto',
            footer_text: 'testing dialog ...',
            enable_trace: true,
            callback: function(event_name, dialog, params) {
                switch (event_name) {
                    case "created":
                        console.log('Dialog created: dialog=%o, params=%o', dialog, params);
                        break;
                }
            }
        });

    });

</script>


<a href="#" class="btn btn-primary pull-right" onclick="dialog1.open(event); return false;">
    <i class="fa fa-plus-circle"></i>
    Test Popup
</a>

Open the Dialog and perform some actions after content has been loaded

In the following example:

• we subscribe the 'loaded' event
• we call open() with show=false, so the Dialog will remain hidden during loading
• after loading is completed, our handle is called
• in this handle, we show the dialog and hide it after a 3 seconds timeout

<script language="javascript">

    $(document).ready(function() {

        dialog2 = new Dialog({
            url: "/j/object/",
            width: '400px',
            min_height: '200px',
            enable_trace: true,
            callback: dialog2_callback
        });

    });

    function dialog2_callback(event_name, dialog, params) {
        switch (event_name) {
            case "loaded":
                dialog.show();
                setTimeout(function() {
                    dialog.close();
                }, 3000);
                break;
        }
    }
</script>

<a href="#" onclick="dialog2.open(event, show=false); return false;">
    <i class="fa fa-plus-circle"></i>
    Test Popup (2)
</a>

Simple Dialogs with Django

dialog1	A simple dialog with static content
dialog2	A dialog which closest itself
dialog3	A dialog whose content is obtained via an Ajax call
dialog4	A dialog who tries to load content via Ajax, but a server-side error occurs
dialog5	A dialog which renders a flexible view ...
standalone page	... which can also produce a standalone HTML page