The solution provided by django-frontend-forms requires two actions:

1. to provide an HTML template for the dialog layout
2. attach the template to a Dialog() javascript object to control it's behaviour

Since in most cases you will be primarily interested in customizing the modal content only, a default template is provided to render a generic dialog (file frontend_forms/templates/frontend_forms/dialogs.html):

<div id="dialog_generic" class="dialog draggable">
    <div class="dialog-dialog">
        <div class="dialog-content">
            <div class="dialog-header">
                <span class="spinner">
                    <i class="fa fa-spinner fa-spin"></i>
                </span>
                <span class="close">&times;</span>
                <div class="title">Title</div>
            </div>
            <div class="dialog-body ui-front">

            </div>
            <div class="dialog-footer">
                <input type="submit" value="Close" class="btn btn-close" />
                <input type="submit" value="Save" class="btn btn-save" />
                <div class="text">footer</div>
            </div>
        </div>
    </div>
</div>

When instantiating the javascript Dialog object, you can select an alternative template instead, providing a suitable value for djalog_selector:

$(document).ready(function() {

    dialog1 = new Dialog({
        dialog_selector: '#dialog_generic',
        html: '<h1>Loading ...</h1>',
        width: '400px',
        min_height: '200px',
        title: '<i class="fa fa-calculator"></i> Select an object ...',
        footer_text: 'testing dialog ...'
    });

});

It is advisable to use an HTML structure similar to the default layout;

Notes:

• adding ".ui-front" to the ".dialog-box" element helps improving the behaviour of the dialog on a mobile client
• adding class ".draggable" makes the Dialog draggable - this is optional, and requires jquery-ui