18 Aug 20172 minutes to read

The Dialog widget can be animated while opening and closing the dialog.

We can specify the effect and the duration for the animation. There are two types of effects. They are slide and fade. We can configure these settings separately for open and close dialog actions.

  • javascript
  • //create dialog widget
    /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />\
    module DialogComponent {
        $(function () {
            var dialogInstance = new ej.Dialog($("#dialog"), {
                    showOnInit: false,
                    actionButtons: ["close", "maximize", "minimize", "collapsible"],
                    enableAnimation: true,
                    animation: {
                        //animation settings while opening the dialog
                        show: {
                            effect: "slide",
                            duration: 500
                        //animation settings while closing the dialog
                        hide: {
                            effect: "fade",
                            duration: 500