Animation in Predefined Dialogs

3 Nov 20223 minutes to read

The predefined dialogs can be animated during the open and close actions. You can customize the Delay, Duration, and Effect of animation by using the animationSettings property.

In the following sample, the zoom effect is enabled. So, the dialog will open with the zoom in and close with the zoom out effect.

Alert

<div style="height:400px;">
    @Html.EJS().Button("alertBtn").Content("Alert").CssClass("e-danger").Render()
</div>
<script>
    document.getElementById('alertBtn').onclick = function () {
        ej.popups.DialogUtility.alert({
            title: "Low battery",
            content: "10% of battery remaining",
            animationSettings: { effect: 'Zoom', duration: 400 }
        });
    };
</script>
public class HomeController : Controller
    {
        public ActionResult Alert()
        {
            return View();
        }
    }

Confirm

<div style="height:400px;">
    @Html.EJS().Button("confirmBtn").Content("Confirm").CssClass("e-success").Render()
</div>
<script>
    document.getElementById('confirmBtn').onclick = function () {
        ej.popups.DialogUtility.alert({
            title: "Delete multiple items",
            content: "Are you sure you want to permanently delete these items?",
            animationSettings: { effect: 'Zoom', duration: 400 }
        });
    };
</script>
public class HomeController : Controller
    {
        public ActionResult Confirm()
        {
            return View();
        }
    }

Prompt

<div style="height:400px;">
    @Html.EJS().Button("promptBtn").Content("Prompt").IsPrimary(true).Render()
</div>
<script>
    document.getElementById('promptBtn').onclick = function () {
        ej.popups.DialogUtility.alert({
            title: "Join Wi-Fi network",
            content: "<p>Enter your name: </p><input id=inputEle type=text name=Required class=e-input placeholder=Type here.. />",
            animationSettings: { effect: 'Zoom', duration: 400 }
        });
    };
</script>
public class HomeController : Controller
    {
        public ActionResult Prompt()
        {
            return View();
        }
    }