Animation in Predefined Dialogs

3 Nov 20222 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.cshtml

<div style="height:400px;">
    <ejs-button id="alertBtn" content="Alert" cssClass="e-danger"></ejs-button>
</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>

Confirm.cshtml

<div style="height:400px;">
        <ejs-button id="confirmBtn" content="Confirm" cssClass="e-success"></ejs-button>
</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>

Prompt.cshtml

<div style="height:400px;">
    <ejs-button id="promptBtn" content="Prompt" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('promptBtn').onclick = function () {
        ej.popups.DialogUtility.confirm({
            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>