Advanced Dialog Effects

You can give the show and hide actions of the jQuery UI dialog widget very specific effect options, like direction, and easing.

by Adam Boduch

HTML

<div class="dialog" title="Dialog Title">
    Dialog content
</div>

CSS

body {
    font-size: 0.8em;
}

JavaScript

// You can pass a whole slew of effect options for the dialog show
// and hide actions.
$( ".dialog" ).dialog({
    minHeight: 0,
    show: {
        effect: "slide",
        direction: "up",
        easing: "easeOutCubic",
        duration: 1100
    },
    hide: {
        effect: "slide",
        direction: "down",
        easing: "easeInOutCubic"
    }
});