Not a developer? Go to MovableType.com

MovableType.org
Documentation
Home / Documentation / Designer's Guide

How to Create a Modal Dialog

To cause a link to open a dialog over the content or page the user is currently viewing, a little javascript is required. The javascript function that needs to be called is openDialog. The openDialog function takes three parameters:

  • source - this parameter is present for backwards compatibility purposes. It is permissible to pass the value null to this input parameter
  • mode name - the name of the mode registered with Movable Type that will be invoked.
  • querystring - any additional parameter you want to pass to the dialog

The following HTML demonstrates how to compose the link and javascript function call:

<a href="javascript:void(0)" 
    onclick="openDialog(null,'<mode name>','<query string>');return false;">Link Text</a>

The URL the dialog will contain is composed by appending the javascript variable ScriptURI, the text ?__mode=, the input parameter mode name, and the text found in the input parameter querystring.

Spawning Dialogs from the Navigation Menu

Dialogs can be spawned directly from a menu item in the navigation menu, as in the “Upload File” menu item in the Create menu. To spawn a dialog, one would register their menu item using the dialog property as illustrated below:

sub init_registry {
    my $plugin = shift;
    $plugin->registry({
        applications => {
                menus => {
                    'create:launch_dialog' => {
                        label  => 'Launch a Dialog',
                        order  => 302,
                        dialog => 'my_mode',
                        view   => "blog",
                    },
                },
            },
        },
    });
}

See also: How to Create Menu Items

A Dialog Template

Once a link has been composed to a dialog, you need to be able to populate the dialog with content. Content is determined by defining a custom mode or method within your application and having that mode render the contents of a dialog template.

Building a dialog template is easy. Movable Type provides a standard header and footer for you that defines the basics of the template for you. It is highly recommended you use these templates because doing so will allow your plugin to appear more deeply integrated and in tune with the rest of the Movable Type application.

Headers and footers are included using the <mt:include> tag like so:

<mt:include name="dialog/header.tmpl">
<mt:include name="dialog/footer.tmpl">

Developers can insert whatever HTML code they want between the header and footer to create a more complex dialog. For example:

<mt:setvarblock name="page_title"><__trans phrase="Hello World"></mt:setvarblock>
<mt:include name="dialog/header.tmpl">
<form method="post" action="<mt:var name="script_url">">
<input type="hidden" name="__mode" value="foo" />
<input type="hidden" name="blog_id" value="<mt:var name="blog_id">" />

<mtapp:setting
    id="bar"
    label_class="top-label"
    label="<__trans phrase="Enter some text">"
    hint="This is some text"
    show_hint="1">
    <input type="file" name="file" />
</mtapp:setting>

<div class="actions-bar">
    <div class="actions-bar-inner pkg actions">
        <button
            type="submit"
            accesskey="s"
            title="<__trans phrase="Continue">"
            class="primary-button"
            ><__trans phrase="Continue"></button>
        <button
            onclick="closeDialog(); return false"
            type="submit"
            accesskey="x"
            title="<__trans phrase="Cancel (x)">"
            ><__trans phrase="Cancel"></button>
    </div>
</div>
</form>
<mt:include name="dialog/footer.tmpl">

See also: defining a custom application method or mode handler

Back