Modal Dialog component for JavaScript and jQuery

Ultima Dialog is a feature rich (modal) dialog component written in JavaScript, using only jQuery core functionalities. The dialog is able to hold complex DOM content, supports AJAX and solves several problems many other dialogs do not even consider. Some of the features are:

supports all common content types: plain text, DOM elements (HTML), images, videos, audio, ajax calls, iFrames
supports form submission within the dialog and loads the result in the same dialog
supports multiple dialogs at once as well as stacking multiple dialogs
considers window size (viewport) and prevents overflow und truncation of the dialog''s content
offers smooth transitions (adjustable) on resize and reposition of the dialog
offers animations and filter effects
offers various callbacks and interrupts
offers easy-to-use shorthand options and methods
does not require you to add HTML, CSS or images
does not require additional JavaScript libraries other than jQuery 1.4+
is browser backwards compatible down to Internet Explorer 8

// Documentation

// Include

You can place the UltimaDialog script include basically wherever you want, just make sure that jQuery is loaded before. jQuery is required and must be at least version 1.4 to work with Ultima Dialog. Remember to pick jQuery 1.x if you need support for Internet Explorer ≤ 8, otherwise pick 2.x or 3.x.

<html>
    <head>

        ...

        <script src="jquery.js"></script>

    </head>
    <body>

        ...

        <script src="jquery.ultima.dialog.js"></script>

    </body>
</html>
<html>
    <head>

        ...

        <script src="jquery.js"></script>
        <script src="jquery.ultima.dialog.js"></script>

    </head>
    <body>

        ...

    </body>
</html>

// Initialization

You can create an instance of the UltimaDialog class by using the native new operator (explicit) or the available jQuery wrapper methods (implicit).

var dialog = $.UltimaDialog.show('Hello World !!');

- OR -

$('<span>Hello World !!</span>').UltimaDialog();
var dialog = new UltimaDialog();

dialog.show('Hello World !!');

// Constructors

Note: You can also use the $ alias instead of the fully qualified jQuery.

new UltimaDialog ( options ) : UltimaDialog
native object constructor, manual method invocation required
jQuery.UltimaDialog ( options ) : jQuery
e.g. $('#foo').UltimaDialog();
clones the HTML content of the preceding jQuery object and pass it to a newly created instance of UltimaDialog, invokes the show() method
jQuery.UltimaDialog.show ( content, options ) : UltimaDialog
creates an instance of UltimaDialog and invokes the show() method
jQuery.UltimaDialog.image ( image, attributes, options ) : UltimaDialog
creates an instance of UltimaDialog and invokes the image() method
jQuery.UltimaDialog.video ( video[], attributes, options ) : UltimaDialog
creates an instance of UltimaDialog and invokes the video() method
jQuery.UltimaDialog.audio ( audio[], attributes, options ) : UltimaDialog
creates an instance of UltimaDialog and invokes the audio() method
jQuery.UltimaDialog.get ( url, data, callback, options ) : UltimaDialog
ajax: creates an instance of UltimaDialog and invokes the get() method (HTTP GET)
jQuery.UltimaDialog.post ( url, data, callback, options ) : UltimaDialog
ajax: creates an instance of UltimaDialog and invokes the post() method (HTTP POST)
jQuery.UltimaDialog.put ( url, data, callback, options ) : UltimaDialog
ajax: creates an instance of UltimaDialog and invokes the put() method (HTTP PUT)
jQuery.UltimaDialog.delete ( url, data, callback, options ) : UltimaDialog
ajax: creates an instance of UltimaDialog and invokes the delete() method (HTTP DELETE)
jQuery.UltimaDialog.iframe ( url, attributes, options ) : UltimaDialog
creates an instance of UltimaDialog and invokes the iframe() method

// Methods

Note: The highlighted UltimaDialog refers to an instance of UltimaDialog while the non-highlighted refers to the static namespace.

UltimaDialog.show ( content, options ) : boolean
shows the specified content
UltimaDialog.image ( image, attributes ) : boolean
shows the specified image
UltimaDialog.video ( video[], attributes ) : boolean
shows the specified video
UltimaDialog.audio ( audio[], attributes ) : boolean
shows the specified audio
UltimaDialog.get ( url, data, settings, options ) : boolean
wrapper method for jQuery.ajax( { method: 'GET' } )
UltimaDialog.post ( url, data, settings, options ) : boolean
wrapper method for jQuery.ajax( { method: 'POST' } )
UltimaDialog.put ( url, data, settings, options ) : boolean
wrapper method for jQuery.ajax( { method: 'PUT' } )
UltimaDialog.delete ( url, data, settings, options ) : boolean
wrapper method for jQuery.ajax( { method: 'DELETE' } )
UltimaDialog.iframe ( url, attributes ) : boolean
shows the specified website in an iFrame
UltimaDialog.close ( callback ) : boolean
closes the dialog
UltimaDialog.close ( index, animate = true ) : boolean
closes the dialog at the specified index, considers the most recent dialog if index is undefined
UltimaDialog.closeAll ( animate = true, deferProgression = false ) : boolean
closes all dialogs
UltimaDialog.get ( index ) : UltimaDialog
returns the dialog at the specified index, considers the most recent dialog if index is undefined
UltimaDialog.isOpened ( index ) : boolean
returns if the dialog at the specified index is opened, considers the most recent dialog if index is undefined
UltimaDialog.relocate ( index ) : boolean
relocates (resizes and repositions) the dialog at the specified index, considers the most recent dialog if index is undefined,
call this method if you change the dialog's content programmatically
UltimaDialog.setOptions ( index, options, overwrite = false ) : boolean
update the dialog options at the specified index, considers the most recent dialog if index is undefined,
options can be merged (default) or completely overwritten,
be aware of the fact that only a few specific options will be considered for an already shown dialog

// Options

Note: The options object is deeply structured, consisting of several sub-objects (nested objects). There are two notations available:

var options = {

    behavior: {

        closeOnCurtain:      false

    },

    css: {

        curtain: {

            backgroundColor: '#FFFFFF'

        },

        window: {

            backgroundColor: '#9A64FF',
            color:           '#FFFFFF',

            border:          '2px solid #000000'

        }

    }

};
var options = {

    '->behavior.closeOnCurtain':     false,

    '->css.curtain.backgroundColor': '#FFFFFF',

    '->css.window.backgroundColor': '#9A64FF',
    '->css.window.color':            '#FFFFFF',

    '->css.window.border':           '2px solid #000000'

};
// setting the following options...

    UltimaDialog.options = {

        '->behavior.closeOnCurtain':  false,
        '->behavior.closeOnEscape':   false

    };

// ...will override the defaults with the specified properties for all future method calls

// setting the following options using the jQuery prefix...

    $.UltimaDialog.options = {

        '->css.loading.content':    'Please wait...',
        '->css.loading.className':  'loading'

    };

// ...will additionally override defaults for all future jQuery wrapped method calls

− animations
curtain
show
effect	'fadeIn'	effect used to show the curtain
duration	400	duration of the above effect
hide
effect	undefined	effect used to hide the curtain undefined: inherit value from show
duration	undefined	duration of the above effect undefined: inherit value from show
deferProgression	false	wait for curtain to be fully shown before progressing to the dialog window
window
show
effect	'fadeIn'	effect used to show the dialog window
duration	400	duration of the above effect
hide
effect	undefined	effect used to hide the dialog window undefined: inherit value from show
duration	undefined	duration of the above effect undefined: inherit value from show
deferProgression	false	wait for window to be fully hidden before progressing to the curtain
reposition
duration	100	animation duration for repositioning the dialog
resize
duration	200	animation duration for resizing the dialog content
rate	200	polling rate to watch for resize of the viewport
− behavior
ajax
cache	false	cache ajax requests
closeOnCurtain	true	click on the curtain will trigger closing of the dialog
closeOnEscape	true	pressing the ESC key will trigger closing of the dialog this value will override the behavior of already opened dialogs (overrides global handler)
closeOnWindow	true	prepend an element that triggers closing of the dialog styling required, see -> css.window.close
disableScrolling	'auto'	disable scroll on body auto: disable on overflow only (avoids multiple scrollbars)
preventOverflow	true	automatically limit the size of the dialog content to prevent overflow
trackSubmit	true	automatically assign submit handlers to every form element found in the dialog content
translateMedia	true	translate plain content automatically to the corresponding media (affects images, video and audio only)
zIndexInc	true	increment the zIndex for every parallel existing dialog
− css
loading
className	''	class added to the loading notification (affects ajax and images only)
content	undefined	content to be placed within the loading notification
x	'50%'	horizontal position of the loading notification, either in px or in %
y	'50%'	vertical position of the loading notification, either in px or in %
< css property >		any CSS property, will be set as inline style
curtain
applyFilter	undefined	CSS3 filter applied to the curtain, e.g. blur(4px), grayscale(100%)
className	''	class added to the curtain element
isVisible	true	draw curtain with a (non-transparent) color
zIndex	9003
< css property >		any CSS property, will be set as inline style
window
className	''	class added to the window element
close
className	''	class added to the close control element
< css property >		any CSS property, will be set as inline style
hardMarginX	0	margin applied to the width of the viewport
hardMarginY	0	margin applied to the height of the viewport
x	'50%'	horizontal position of the window, either in px or in %
y	'50%'	vertical position of the window, either in px or in %
zIndex	9004
< css property >		any CSS property, will be set as inline style
− callbacks
onOpening	undefined	before opening (UltimaDialog) : return false to interrupt
onCurtainOpened	undefined	after curtain is fully shown (UltimaDialog)
onWindowOpened	undefined	after window is fully shown (UltimaDialog)
onContentReady	undefined	after content is known and ready to be placed (UltimaDialog, content) : return false to interrupt
onContentVisible	undefined	after content is fully shown (UltimaDialog)
onAsyncSuccess	undefined	after asynchronous request returned an expected result (UltimaDialog, response)
onAsyncError	undefined	after asynchronous request returned an unexpected result (UltimaDialog, request)
onSubmit	undefined	before submit within dialog is sent (UltimaDialog, data) : return false to interrupt
onClosing	undefined	before closing (UltimaDialog) : return false to interrupt
onCurtainClosed	undefined	after curtain is fully hidden and removed (UltimaDialog)
onWindowClosed	undefined	after window is fully hidden and removed (UltimaDialog)

// Examples

You can test UltimaDialog in your browser console as well.

new UltimaDialog().show('Hello World !!');

- OR -

$.UltimaDialog.show('Hello World !!');
new UltimaDialog().show(
$('.features')
);

- OR -

$('.features').UltimaDialog();

- OR -

$.UltimaDialog.show(
$('.features')
);
var dialog = new UltimaDialog({
    '->behavior.closeOnCurtain': false
});

dialog.show(
    $('<button onclick="UltimaDialog.close();">close dialog</button>')
);

- OR -

$('<button onclick="UltimaDialog.close();">close dialog</button>').UltimaDialog({
    '->behavior.closeOnCurtain': false
});

- OR -

$.UltimaDialog.show(
    $('<button onclick="UltimaDialog.close();">close dialog</button>'),
    {
        '->behavior.closeOnCurtain': false
    }
);

- alternate option notation -

{
    behavior: {
        closeOnCurtain: false
    }
}
var dialog = new UltimaDialog({

    css: {

        curtain: {
            applyFilter:      'blur(4px)',
            backgroundColor:  '#9B64FF',
        },

        window: {
            backgroundColor:  '#202020',
            color:            '#F09A2D',
            borderRadius:     '16px',
            close: {
                className:    'close-example'
            }
        }
    }

});

dialog.show(...);

- alternate option notation -

{
    '->curtain.applyFilter':      'blur(4px)',
    '->curtain.backgroundColor':  '#9B64FF',
    '->window.backgroundColor':   '#202020',
    '->window.color':             '#F09A2D',
    '->window.borderRadius':      '16px',
    '->window.close.className':   'close-example'
}

$.UltimaDialog.get('/examples/demo.html', { '->css.loading.className': 'loading' });
$.UltimaDialog.post('/examples/form.html', {

chat: ...

}, {

'->css.loading.className': 'loading'

});
var dialog = new UltimaDialog({

    '->behavior.disableScrolling':  true,
    '->css.loading.className':      'loading'

});

dialog.iframe('https://example.org/', {

    width:        960,
    height:       540,

    frameborder:  0

});

$.UltimaDialog.image(
    '/assets/TulfesTyrol.jpg',
    {
        width: 720
    },
    {
        '->css.loading.className': 'loading'
    }
);
// common file extensions (jpg, gif, png) are automatically treated as image
$.UltimaDialog.show('/assets/TulfesTyrol.jpg', {

    '->animations.window.resize.duration':  600,
    '->css.loading.className':             'loading',
    '->css.window.hardMarginX':             64,
    '->css.window.hardMarginY':             64

});

- OR -

// explicitly bind the content to an image tag
$.UltimaDialog.image('/assets/TulfesTyrol.jpg');

// in case you do not want the content to be treated as image, add the following option:
$.UltimaDialog.show('/assets/TulfesTyrol.jpg', { '->behavior.translateMedia': false });

TulfesTyrol.jpg © F1 Online/REX
$.UltimaDialog.video('/assets/video_example.mp4', {

'->css.loading.className': 'loading'
'->callbacks.onAsyncError': function(dialog, error) { alert(error); }
});
$.UltimaDialog.audio('/assets/audio_example.mp3', {

'->css.loading.className': 'loading'
'->callbacks.onAsyncError': function(dialog, error) { alert(error); }
});
var dialog = new UltimaDialog({

    '->css.loading.content':         'Opening Youtube...',

    '->css.window.backgroundColor':  '#B31217',
    '->css.window.color':            '#FFFFFF',

    '->css.window.border':           '2px solid #FFFFFF',
    '->css.window.border-radius':    '16px'

});

dialog.iframe('https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ', {

    allowfullscreen:  true,
    frameborder:      0

});

$.UltimaDialog.show(
    $('
        <button onclick="exampleStacking();">
            open another dialog
        </button>
        <br><br>
        <button onclick="UltimaDialog.closeAll();">
            close all dialogs
        </button>
    '),
    {
        '->css.curtain.backgroundColor':  '#F09A2D',
        '->css.window.textAlign':         'center',
        '->css.window.x':                 randRange(10, 90) + '%',
        '->css.window.y':                 randRange(10, 90) + '%'
    }
);
$('

    <div style="height: 320px; width: 1280px; position: relative;">

        <span style="font-size: 400%;">
            This content is purposely oversized.
        </span>

        <div style="position: absolute; top: 16px; right: 16px;">
            top right corner
        </div>
        <div style="position: absolute; bottom: 16px; left: 16px;">
            bottom left corner
        </div>
        <div style="position: absolute; bottom: 16px; right: 16px;">
            bottom right corner
        </div>

    </div>

').UltimaDialog({

    '->css.window.width':   640,
    '->css.window.height':  240

});
var dialog = new UltimaDialog({

    '->animations.curtain.show.duration':     1000,
    '->animations.curtain.deferProgression':  true,

    '->animations.window.show.duration':      1000,
    '->animations.window.deferProgression':   true,

    '->behavior.closeOnCurtain':              false

});

dialog.show('

    <p>
        you just witnessed the opening animation<br>
        with deferred progression
    </p>

    <button onclick="UltimaDialog.close(true);">
        close with animation
    </button>

      

    <button onclick="UltimaDialog.close(false);">
        close without animation
    </button>

');
$.UltimaDialog.get('/examples/ultimadialog-form.html', {

    '->animations.curtain.deferProgression':  true,
    '->animations.window.deferProgression':   true,

    callbacks: {

        onOpening:         function() { alert('onOpening'); },
        onCurtainOpened:   function() { alert('onCurtainOpened'); },
        onWindowOpened:    function() { alert('onWindowOpened'); },
        onContentReady:    function() { alert('onContentReady'); },
        onContentVisible:  function() { alert('onContentVisible'); },
        onAsyncSuccess:    function() { alert('onAsyncSuccess'); },
        onAsyncError:      function() { alert('onAsyncError'); },
        onSubmit:          function() { alert('onSubmit'); },
        onClosing:         function() { alert('onClosing'); },
        onCurtainClosed:   function() { alert('onCurtainClosed'); },
        onWindowClosed:    function() { alert('onWindowClosed'); }

    }

});

// License

// Download

Ultima Dialog 0.95.7 29 KB