Dialogplugin

You can create a dialog box at any time via the Dialog plugin

$("#createWindow").on('click', function(){
    $.Dialog({
        shadow: true,
        overlay: false,
        icon: '<span class="icon-rocket"></span>',
        title: 'Title',
        width: 500,
        padding: 10,
        content: 'Window content here'
    });
});
$("#createFlatWindow").on('click', function(){
    $.Dialog({
        overlay: true,
        shadow: true,
        flat: true,
        icon: '<img src="images/excel2013icon.png">',
        title: 'Flat window',
        content: '',
        onShow: function(_dialog){
            var content = _dialog.children('.content');
            content.html('Set content from event onShow');
        }
    });
});
$("#createWindowYoutube").on('click', function(){
    $.Dialog({
        overlay: false,
        shadow: true,
        flat: false,
        icon: '<img src="images/excel2013icon.png">',
        title: 'Window 8.1 Everywhere For Everything!',
        content: '',
        onShow: function(_dialog){
            var html = [
                '<iframe width="640" height="480"
                        src="//www.youtube.com/embed/_24bgSxAD9Q"
                        frameborder="0"></iframe>'
            ].join("");

            $.Dialog.content(html);
        }
    });
});

Parameters:

icon	false	false or html tag (span with class `icon-*` or `img`)
title	string	string (plain text or html) for dialog title
content	string	string (plain text or html) for dialog content
flat	boolean	default false, create flat style dialog
shadow	boolean	default false, create shadow for dialog
overlay	boolean	default false, show overlay for dialog
draggable	boolean	default false, set dialog draggable
width	int or string (percent)	default 'auto', if value != auto min-width sets
height	int or string (percent)	default 'auto', if value != auto min-height sets
padding	int	default 0, set content padding
position	'default' or object {offsetX, offsetY}	default 'default', dialog position
sysButtons	false or object {btnClose, btnMax, btnMin}	default {btnClose: true}, dialog system buttons

Events

Dialog plugin now support event onShow. You can set content for dialog from the event, after dialog is showing.

$("#createWindow").on('click', function(){
    $.Dialog({
        shadow: true,
        overlay: true,
        icon: '<span class="icon-rocket"></span>',
        title: 'Title',
        content: 'Window content here',
        onShow: function(_dialog){
            console.log(_dialog);
        }
    });
});

Any components in dialog

If you a used any Metro UI CSS components in dialog and this components required init from javascript you must re init components with $.Metro.init* functions.

$("#createFlatWindow").on('click', function(){
    $.Dialog({
        overlay: true,
        shadow: true,
        flat: true,
        icon: '<img src="images/excel2013icon.png">',
        title: 'Flat window',
        content: '',
        padding: 10,
        onShow: function(_dialog){
            var content = '<form>' +
                '<label>Login</label>' +
                '<div class="input-control text"><input type="text" name="login">
                <button class="btn-clear"></button></div> ' +
                '<label>Password</label>' +
                '<div class="input-control password">
                <input type="password" name="password">
                <button class="btn-reveal"></button></div> ' +
                '<div class="input-control checkbox">
                <label><input type="checkbox" name="c1" checked/>
                <span class="check"></span>Check me out</label></div>'+
                '<div class="form-actions">' +
                '<button class="button primary">Login to...</button> '+
                '<button class="button" type="button" onclick="$.Dialog.close()">Cancel</button> '+
                '</div>'+
                '</form>';

            $.Dialog.title("User login");
            $.Dialog.content(content);
            $.Metro.initInputs();
        }
    });
});