How to

Create Nested Dialog

A Dialog can be nested within another Dialog. The below sample contains parent and child Dialog (inner Dialog).

Step 1:

Create two div elements with id #dialog and #innerDialog.

Step 2:

Initialize the Dialog as mentioned in the below sample.

Step 3:

Set the inner Dialog target as #dialog.

Source
Preview
app.vue
<template>
  <div>
    <div id="target" class="col-lg-12 control-section" style="padding:10px;position:relative;">
        <ejs-button id='dlgbtn' v-on:click.native="buttonClick">Open Dialog</ejs-button>

        <ejs-dialog ref='dialogObj' :visible="true" header='First Dialog' showCloseIcon='true' :animationSettings='animationSettings' width='330px' height='260px'
            target='#target' content='<p>This is the first dialog and acts as a parent dialog, you can open the second (child) dialog by clicking "Next".</p>' :buttons='dlgButton' :open='dialogOpen' :close='dialogClose'>
        </ejs-dialog>

        <ejs-dialog ref='secondDialog' :visible="false" header='Second Dialog' :isModal='isModal' showCloseIcon='true' allowDragging='true' :animationSettings='animationSettings' width='285px' height='215px'
            target='#target' content='<p>This is the second dialog and act as a child dialog.</p>' :buttons='dlg2Button'>
        </ejs-dialog>
    </div>
  </div>
</template>

<style>
    #dlgbtn {
        margin-right: 5%;
    }
    .control-section {
        height: 100%;
        min-height: 340px;
    }
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

<script>
import Vue from "vue";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';

Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            dlgButton: [{'click': () => { this.$refs.secondDialog.show();}, buttonModel: { isPrimary:'true', content: 'Next' }}],

            dlg2Button: [{ 'click': () => { this.$refs.secondDialog.hide(); },buttonModel: { isPrimary:'true', content: 'Close' }}],

            animationSettings: { effect: 'None' },
            isModal: true,
        }
    },
    methods: {
            buttonClick: function(args){
                this.$refs.dialogObj.show();
            },
            dialogClose: function() {
                document.querySelector('#dlgbtn').style.display='block';
            },
            dialogOpen: function() {
                document.querySelector('#dlgbtn').style.display='none';
            }
    }
};
</script>

Position the Dialog on center of the page on scrolling

By default, when scroll the page/container Dialog also scrolled along with the page/container. When a user expects to display the Dialog in the same position without scrolling achieving this in sample level as like below. Here added ‘e-fixed’ class to Dialog element and prevent the scrolling.

Source
Preview
app.vue
<template>
  <div>
    <div id="target" class="control-section; position:relative">
        <div>
            <b>JavaScript:</b><br />
            JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript
            language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web
            content production; the majority of websites employ it and it is supported by all modern Web browsers without
            plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting
            object - oriented , imperative, and functional programming styles.
            <br /><br /><br />
            <b>MVC:</b><br />
            Model–view–controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it. The model consists of application data, business rules, logic, and functions. A view can be any output representation of data, such as a chart or a diagram. Multiple views of the same data are possible, such as a bar chart for management and a tabular view for accountants. The controller mediates input, converting it to commands for the model or view.The central ideas behind MVC are code reusability and in addition to dividing the application into three kinds of components, the MVC design defines the interactions between them.
            A controller can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). It can also send commands to the model to update the model's state (e.g., editing a document).
            A model notifies its associated views and controllers when there has been a change in its state. This notification allows the views to produce updated output, and the controllers to change the available set of commands. A passive implementation of MVC omits these notifications, because the application does not require them or the software platform does not support them.
            A view requests from the model the information that it needs to generate an output representation to the user.
        </div>
        <!-- Render Dialog -->
        <ejs-dialog ref="scrollDialog" :header='header' :target='target' :width='width' :showCloseIcon='true' :content='content' :open="dlgOpen" :close="dlgClose">
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';

Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);
export default {
    data: function() {
        return {
            target: '#target',
            width: '335px',
            header: 'Dialog',
            content: '<button class="e-control e-btn" id="targetButton" role="button" >Prevent Dialog Scroll</button>',
        }
    },
    mounted: function(){
        document.getElementById('targetButton').onclick = (): void => {
            this.$refs.scrollDialog.cssClass = 'e-fixed';
        }
    },
    methods: {
        btnClick: function() {
            this.$refs.scrollDialog.show();
        },
        dlgClose: function() {
            document.getElementById('modalbtn').style.display = '';
        },
        dlgOpen: function() {
            document.getElementById('modalbtn').style.display = 'none';
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    html,
    body,
    .control-section {
        height: 100%;
        width: 100%;
        min-height: 200px;
    }
    body {
        overflow-y: scroll;
    }
    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .e-fixed {
        position: fixed;
    }
</style>

Load dialog content using AJAX

You can load dialog’s content dynamically from external source like external file using AJAX library. The AJAX library can make the request and load dialog’s content using its success event. Refer the following link to learn about how to load dialog content using AJAX.

AJAX Content

Render a dialog without header

The dialog can be rendered without header by setting the header property value as empty string or null. By default, dialog is rendered without header.

Source
Preview
app.vue
<template>
  <div>
    <div id="target" class="control-section; position:relative" style="height:350px;">
        <!-- Render Button to open the Dialog -->
        <ejs-button id='dlgbtn' v-on:click.native="btnClick">Open Dialog</ejs-button>
        <!-- Render Dialog -->
        <ejs-dialog ref="footerDialog" :target='target' :width='width' :buttons='buttons' :content='content' :close="dlgClose">
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            target: "#target",
            width: '250px',
            content: 'This is a dialog without header.',
            buttons: [{ click: this.dlgButtonClick, buttonModel: { content: 'OK', isPrimary: true } },
            { click: this.dlgButtonClick, buttonModel: { content: 'Cancel' }}],
            animationSettings: { effect: 'None' }
        }
    },
    mounted: function(){
        document.getElementById('dlgbtn').focus();
    },
    methods: {
        btnClick: function() {
            this.$refs.footerDialog.show();
        },
        dlgClose: function() {
            document.getElementById('dlgbtn').style.display = '';
        },
        dlgButtonClick: function() {
            this.$refs.footerDialog.hide();
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .control-section {
        height: 100%;
        min-height: 200px;
    }
</style>

Show dialog with full screen

You can show the dialog in fullscreen by passing true as argument to the dialog show method.

Source
Preview
app.vue
<template>
  <div>
    <div id="target" class="control-section; position:relative" style="height:360px;">
        <!-- Render Button to open the Dialog -->
        <ejs-button id='dlgbtn' v-on:click.native="btnClick">Open Dialog</ejs-button>
        <!-- Render Dialog -->
        <ejs-dialog ref="footerDialog" :header='header' :target='target' :width='width' :buttons='buttons' :visible='visible' :showCloseIcon='showCloseIcon' :content='content' :close="dlgClose">
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            target: "#target",
            width: '250px',
            header: 'Dialog',
            visible: false,
            showCloseIcon: true,
            content: 'This is a Dialog with fullscreen display.',
            buttons: [{ click: this.dlgButtonClick, buttonModel: { content: 'OK', isPrimary: true } },
            { click: this.dlgButtonClick, buttonModel: { content: 'Cancel' }}],
            animationSettings: { effect: 'None' }
        }
    },
    mounted: function(){
        document.getElementById('dlgbtn').focus();
    },
    methods: {
        btnClick: function() {
            this.$refs.footerDialog.show(true);
        },
        dlgClose: function() {
            document.getElementById('dlgbtn').style.display = '';
        },
        dlgButtonClick: function() {
            this.$refs.footerDialog.hide();
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .control-section {
        height: 100%;
        max-height: 380px;
        overflow: hidden;
    }

</style>

Display a dialog with custom position

By default, the dialog is displayed in the center of the target container. The dialog position can be set using the position property by providing custom X and Y coordinates. The dialog can be positioned inside the target based on the given X and Y values.

Source
Preview
app.vue
<template>
  <div>
     <div id="target" class="control-section">
        <ejs-dialog id='firstDialog' header='Position-01' :position='position' width='360px' ref='dialogObj'
            target='#target' :content='content' :closeOnEscape='false'>
        </ejs-dialog>
        <ejs-dialog ref="secondDialog" header='Position-02' :height='height1' :target='target' width='360px'  :position='position1' :content='content1'>
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            target: "#target",
            height: '120px',
            content: 'The dialog is positioned at {X: 160, Y: 14} coordinates.',
            position: { X: 160, Y: 14 },
            height1: '120px',
            content1: 'The dialog is positioned at {X: 160, Y: 240} coordinates',
            position1: { X: 160, Y: 240 }
        }
    },
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .control-section {
        height: 100%;
        min-height: 200px;
    }
    #defaultDialog table,
    #defaultDialog th,
    #defaultDialog td {
        border: 1px solid #D8D8D8;
        border-collapse: collapse;
    }

    #container {
        height: 365px;
    }

    #defaultDialog.e-dialog .e-footer-content {
        padding: 0px 1px 4px ! important;
    }

    .tableStyle {
        margin: 17px;
        width: 304px;
    }

    .e-dialog .e-dlgcontent{
        padding: 10px 16px 10px;
    }

    .e-radio +label .e-label {
        line-height:18px;
    }

    td {
        padding: 6px;
    }
</style>

Prevent closing of modal dialog

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

Source
Preview
app.vue
<template>
  <div>
    <div id="dialogTarget" class="control-section; position:relative" style="height:350px;">
        <!-- Render Button to open the modal Dialog -->
        <ejs-button id='dlgbtn' v-on:click.native="dlgBtnClick">Open Dialog</ejs-button>
        <!-- Render modal Dialog -->
        <ejs-dialog ref="modalDialog"  :isModal='isModal':beforeClose="validation" :header='header' :target='target' :width='width' :buttons='buttons' :animationSettings='animationSettings' :close="modalDlgClose" >
            <div class='wrap'>
                  <div class="e-float-input">
                      <input id="textvalue" type="text" required/>
                      <span class="e-float-line"></span>
                      <label class="e-float-text">Username</label>
                  </div>
                  <div class="e-float-input">
                      <input id="textvalue2" type="password" required/>
                      <span class="e-float-line"></span>
                      <label class="e-float-text">Password</label>
                  </div>
              </div>
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            target: "#dialogTarget",
            width: '300px',
            header: 'Sign in',
            buttons: [{ click: this.dlgButtonClick, buttonModel: { content: 'log in', isPrimary: true } }],
            isModal: true,
            animationSettings: { effect: 'None' }
        }
    },
    mounted: function(){
        document.getElementById('dlgbtn').focus();
    },
    methods: {
        dlgBtnClick: function() {
            this.$refs.modalDialog.show();
        },
        modalDlgClose: function() {
            document.getElementById('dlgbtn').style.display = '';
        },
        dlgButtonClick: function() {
            this.$refs.modalDialog.hide();
        },
        validation: function(args) {
            let text = document.getElementById('textvalue');
            let text1 = document.getElementById('textvalue2');
            if (text.value === "" && text1.value === "") {
                args.cancel= true;
                alert("Enter the username and password")
            } else if (text.value === "") {
                args.cancel= true;
                alert("Enter the username")
            } else if (text1.value === "") {
                args.cancel= true;
                alert("Enter the password")
            } else if (text.value.length < 4) {
                args.cancel= true;
                alert("Username must be minimum 4 characters")
            } else {
                args.cancel= false;
                document.getElementById("textvalue").value = "";
                document.getElementById("textvalue2").value = "";
            }
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .control-section {
        height: 100%;
        min-height: 200px;
    }
    .wrap {
    box-sizing: border-box;
    margin: 0 auto;
    width: 260px;
    }
    .e-dlg-container .e-float-input {
    margin: 17px 0;
    }
    .e-dlg-container .wrap .e-control .e-btn {
        margin: 3% 26%;
    }

    .text-center {
        text-align: center;
    }

    #content {
        margin-top: 12px;
    }

    .e-dlg-container .e-footer-content {
        padding: 20px 0 0;
        width: 100%;
    }

    .e-dlg-container .e-dialog .e-footer-content .e-btn {
        width: 100%;
        height: 36px;
        margin-left: 0px;
    }

    .e-dlg-container .e-dialog .e-footer-content {
        padding: 0 18px 18px;
    }
    .e-dlg-container .e-dialog .e-dlg-header-content .e-dlg-header {
        color: #333;
        font-weight: bold;
        text-align: center;
        width:  100%;
        font-size: 20px;
    }
</style>

Prevent opening of the dialog

You can prevent opening of the dialog by setting the beforeOpen event argument cancel value to true. In the following sample, the success dialog is opened when you enter the username value with minimum 4 characters. Otherwise, it will not be opened.

Source
Preview
app.vue
<template>
  <div>
    <div id="dialogTarget" class="control-section; position:relative" style="height:300px;">
        <div class="login-form">
                <div class='wrap'>
                    <div id="heading">Sign in</div>
                    <div class="e-float-input">
                        <input id="textvalue" type="text" required/>
                        <span class="e-float-line"></span>
                        <label class="e-float-text">Username</label>
                    </div>
                    <div class="e-float-input">
                        <input id="textvalue2" type="password" required/>
                        <span class="e-float-line"></span>
                        <label class="e-float-text">Password</label>
                    </div>
                    <div class="button-contain">
                        <ejs-button id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick" >Log in</ejs-button>
                    </div>
                </div>
            </div>
        <ejs-dialog id="dialog" ref="Dialog" :header='header' :isModal='isModal' :target='target' :width='width' :buttons='buttons' :animationSettings='animationSettings' :visible='visible' :content='content' :beforeOpen="validation" :close="modalDlgClose">
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            target: "#dialogTarget",
            width: '250px',
            visible: false,
            header: 'Success',
            isModal: true,
            content: 'Congratulations! Login Success',
            buttons: [{ click: this.dlgButtonClick, buttonModel: { content: 'Dismiss', isPrimary: true } }],
            isModal: true,
            animationSettings: { effect: 'None' }
        }
    },
    mounted: function(){
        document.getElementById('dialogbtn').focus();
    },
    methods: {
        dialogBtnClick: function() {
            this.$refs.Dialog.show();
        },
        modalDlgClose: function() {
            document.getElementById('dialogbtn').style.display = '';
        },
        dlgButtonClick: function() {
            this.$refs.Dialog.hide();
        },
        validation: function(args) {
            let text = document.getElementById('textvalue');
            let text1 = document.getElementById('textvalue2');
            if (text.value === "" && text1.value === "") {
                args.cancel= true;
                alert("Enter the username and password")
            } else if (text.value === "") {
                args.cancel= true;
                alert("Enter the username")
            } else if (text1.value === "") {
                args.cancel= true;
                alert("Enter the password")
            } else if (text.value.length < 4) {
                args.cancel= true;
                alert("Username must be minimum 4 characters")
            } else {
                args.cancel= false;
                document.getElementById("textvalue").value = "";
                document.getElementById("textvalue2").value = "";
            }
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .control-section {
        height: 100%;
        min-height: 200px;
    }
    .wrap {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 20px 30px;
        width: 340px;
        background: #f7f7f7;
    }
    .wrap .e-float-input { /* csslint allow: adjoining-classes */
        margin: 17px 0;
    }

    .text-center {
        text-align: center;
    }

    #content {
        margin-top: 12px;
    }

    .button-contain {
        padding: 20px 0 0;
        width: 100%;
    }

    .button-contain .e-btn { /* csslint allow: adjoining-classes */
        width: 100%;
        height: 36px;
    }

    #heading {
        color: #333;
        font-weight: bold;
        margin: 0 0 15px;
        text-align: center;
        font-size: 20px;
    }

    .login-form {
        width: 340px;
        margin: 50px auto;
    }

    #dialog.e-dialog .e-footer-content {
        text-align: center;
    }
</style>

Read all the values from dialog on button click

You can read the dialog element values by binding the action handler to the footer buttons. The buttons property provides the options to bind events to the action buttons. For detailed information about buttons, refer to the footer section. In the below sample, value of input elements within the dialog has been checked in the footer button click event and send the values as the content of confirmation dialog.

Source
Preview
app.vue
<template>
  <div>
    <div id="target">
        <center> <ejs-button id="dialogbtn" v-on:click.native="btnClick">Open</ejs-button></center>
        <ejs-dialog id="dialog" ref="Dialog" :header='header' :target='target' :width='width' :buttons='buttons' :visible='visible' :content='content'  :showCloseIcon="showCloseIcon">
        </ejs-dialog>

        <ejs-dialog id="modalDialog" ref="ModalDialog" :header='model_header' :isModal='isModal' :target='target' :buttons='mbuttons' :animationSettings='animationSettings' :visible='visible' >
        </ejs-dialog>
    </div>

  </div>
</template>
<script>
import Vue from "vue";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';

Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
     data: function() {
        return {
            header: 'User details',
            content: "<form><div class='form-group'><label for='name'>Name:</label>" +
            "<input type='name' value='' class='form-control' id='name'>" +
            "</div><div class='form-group'><label for='email'>Email Id:</label>" +
            "<input type='email' value='user@syncfusion.com' class='form-control' id='email'>" +
            "</div><div class='form-group'><label for='contact'>Contact Number:</label>" +
            "<input type='contact' class='form-control' id='contact'>" +
            "</div><div class='form-group'><label for='address'>Address:</label>" +
            "<textarea class='form-control' rows='2' id='address'></textarea>" +
            "</div></form>",
            showCloseIcon: true,
            visible: false,
            buttons: [{
                buttonModel: { isPrimary: true, content: 'Submit' }, click:                  this.createModalDialog,
            }],
            target: document.querySelector('body'),
            width: '400px',
            animationSettings: { effect: 'Zoom' },
            model_header: 'User details',
            showCloseIcon: true,
            isModal: true,
            mbuttons: [{
                buttonModel: {isPrimary: true, content: 'Yes'}, click:  function() {
                    this.hide();
                }}, {
                buttonModel: {isPrimary: false, content: 'No'}, click: function() {
                    this.hide();
                    this.$refs.Dialog.show();
                }}
            ],
        }
    },
    methods: {
        btnClick: function () {
            this.$refs.Dialog.show();
        },
        createModalDialog: function() {
            this.$refs.Dialog.hide()
            this.$refs.ModalDialog.content = this.getDynamicContent();
            this.$refs.ModalDialog.show()
        },

        getDynamicContent: function() {
            if (!document.getElementById('dialog')) {return;}
            let input =  document.getElementById('dialog').querySelector('#name');
            let email =  document.getElementById('dialog').querySelector('#email');
            let contact =  document.getElementById('dialog').querySelector('#contact');
            let address =  document.getElementById('dialog').querySelector('#address');
            let template = "<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><b>Confirm your details</b></div>" +
            "</div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='name'> Name: </span>" +
            "</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='nameValue'>"+ input.value + "</span> </div></div>" +
            "<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='email'> Email: </span>" +
            "</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='emailValue'>" + email.value +
            "</span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
            "<span id='Contact'> Contact number: </span></div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
            "<span id='contactValue'>"+ contact.value +" </span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
            "<span id='Address'> Address: </span> </div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='AddressValue'>" + address.value +"</span></div></div>"
            return template;
        },
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
#app {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
#modalDialog {
    margin: 20px;
}
html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.row {
    padding: 10px 3px;
}
</style>

Customize the dialog appearance

You can customize the dialog appearance by providing dialog template as string or HTML element to the content property. In the following sample, dialog is customized as error window appearance.

Source
Preview
app.vue
<template>
   <div>
    <div id="dialogTarget" class="control-section; position:relative" style="height:300px;">
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open</ejs-button></center>
        <ejs-dialog id="dialog" ref="Dialog" :header='header' :showCloseIcon='showCloseIcon' :target='target' :width='width' :buttons='buttons' :animationSettings='animationSettings' :visible='visible' :content='content'>
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            header: 'File and Folder Rename',
            content: "<div class = 'dialog-content'><div class='msg-wrapper  col-lg-12'><span class='e-icons        close-icon col-lg-2'></span>" +
                "<span  class='error-msg col-lg-10'>Can not rename 'pictures' because a file or folder with that name already exists </span>" +
                "</div><div class='error-detail col-lg-8'><span>Specify a different name</span> </div></div>",
            showCloseIcon: true,
            visible: false,
            buttons: [{
                buttonModel: { isPrimary: true, content: 'close' }, click:  function() {
                    this.hide();
                }
            }],
            target: document.querySelector('body'),
            width: '400px',
            animationSettings: { effect: 'Zoom' }
        }
    },
    methods: {
        dialogBtnClick: function() {
            this.$refs.Dialog.show();
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/bootstrap.css";
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    .row {
        padding: 10px 3px;
    }

    span.close-icon {
        width: 24px;
        height: 24px;
        position: relative;
        /* background-color: yellow; */
        display: inline-block;
        top: 17px;
    }
    span.error-msg {
        color: #66afe9;
        display: inline-block;
        position: relative;
        top: 18px;
        left: 20px;
        width: 80%;
        padding: 0px 16px 27px;
    }
    .error-detail {
        position: relative;
        left: 45px;
        margin: 20px 0px 21px;
    }
    .close-icon:before {
        content: '\e7e9';
        font-size: 26px;
        color:#d9534f;
        position: relative;
        left: 5px;
    }

    .e-dialog .e-footer-content {
        background-color: #f8f8f8;
    }

    .e-dialog, .e-dialog .e-dlg-header-content {
        background-color: #d9edf7;
    }
    .e-dialog {
        padding:3px;
    }
    .e-dialog .e-dlg-header-content {
        padding: 10px;
    }
    .e-dialog .e-footer-content {
        padding: 8px 12px;
    }

    .e-dialog .e-dlg-content {
        padding: 15px 0px 0px;
    }
</style>

Close dialog while click on outside of dialog

By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method. Set the CloseOnEscape property value to false to prevent closing of the dialog when pressing Esc key.

In the following sample, dialog is closed when clicking outside the dialog area using hide method.

Source
Preview
app.vue
<template>
  <div>
    <div id="dialogTarget" class="control-section; position:relative" v-on:click.self="btnClick" style="height:350px;">
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open</ejs-button></center>
        <ejs-dialog id="dialog" ref="Dialog" :header='header' :showCloseIcon='showCloseIcon' :target='target' :width='width' :buttons='buttons' :animationSettings='animationSettings' :visible='visible' :content='content' :closeOnEscape='closeOnEscape'>
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
     data: function() {
        return {
            header: 'Delete Multiple Items',
            content: "Are you sure you want to permanently delete all of these items?",
            showCloseIcon: true,
            visible: false,
            buttons: [{ buttonModel: { isPrimary: true, content: 'Yes' }, click: this.btnClick }, { buttonModel: { content: 'No' }, click: this.btnClick }],
            target: document.body,
            height: 'auto',
            width: '300px',
            animationSettings: { effect: 'Zoom' },
            closeOnEscape: true
        }
    },
    methods: {
        dialogBtnClick: function() {
            this.$refs.Dialog.show();
        },
        btnClick: function() {
            this.$refs.Dialog.hide();
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

Add an icons to dialog buttons

You can add an icons to the dialog buttons using the buttons property or footerTemplate property . For detailed information about dialog buttons, refer to the documentation section.

In the following sample, dialog footer buttons are customized with icons using buttons property.

Source
Preview
app.vue
<template>
  <div>
    <div id="target">
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open</ejs-button></center>

        <ejs-dialog id="dialog" ref="Dialog" :header='header' :showCloseIcon='showCloseIcon' :target='target' :width='width' :buttons='buttons' :animationSettings='animationSettings' :visible='visible' :content='content' :closeOnEscape='closeOnEscape'>
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            header: 'Delete Multiple Items',
            content: "Are you sure you want to permanently delete all of these items?",
            showCloseIcon: true,
            visible: false,
            buttons: [{ buttonModel: { isPrimary: true, content: 'Yes', iconCss: 'e-icons e-ok-icon' }, click: this.btnClick }, { buttonModel: { content: 'No', iconCss: 'e-icons e-close-icon' }, click: this.btnClick }],
            target: document.body,
            height: 'auto',
            width: '300px',
            animationSettings: { effect: 'Zoom' },
            closeOnEscape: true
        }
    },
    methods: {
        dialogBtnClick: function() {
            this.$refs.Dialog.show();
        },
        btnClick: function() {
            this.$refs.Dialog.hide();
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

#app {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
#target {
    height: 100%;
    min-height: 350px;
}
.e-ok-icon::before {
    content: '\e7ff';
}

.e-close-icon::before {
    content: '\e825';
}
</style>

In the following sample, dialog footer buttons are customized with icons using footerTemplate property.

Source
Preview
app.vue
<template>
  <div>
    <div id="target">
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open</ejs-button></center>

        <ejs-dialog id="dialog" ref="Dialog" :header='header' :showCloseIcon='showCloseIcon' :target='target' :width='width' :animationSettings='animationSettings' :footerTemplate='footer' :visible='visible' :content='content' :closeOnEscape='closeOnEscape'>
        </ejs-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);

export default {
    data: function() {
        return {
            header: 'Delete Multiple Items',
            content: "Are you sure you want to permanently delete all of these items?",
            showCloseIcon: true,
            visible: false,
            footer: '<div><button id="Button1" class="e-control e-btn e-primary e-flat" data-ripple="true"><span class="e-btn-icon e-icons e-ok-icon e-icon-left"></span>Yes</button><button id="Button2" class="e-control e-btn e-flat" data-ripple="true"><span class="e-btn-icon e-icons e-close-icon e-icon-left"></span>No</button></div>',
            target: document.body,
            height: 'auto',
            width: '300px',
            animationSettings: { effect: 'Zoom' },
            closeOnEscape: true
        }
    },
    mounted: function(){
        document.getElementById('Button1').onclick = () => {
                this.$refs.Dialog.hide();
        };
        document.getElementById('Button2').onclick = () => {
                this.$refs.Dialog.hide();
        };
    },
    methods: {
        dialogBtnClick: function() {
            this.$refs.Dialog.show();
        },
        btnClick: function() {
            this.$refs.Dialog.hide();
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

#app {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
#target {
    height: 100%;
    min-height: 350px;
}
.e-ok-icon::before {
    content: '\e7ff';
}

.e-close-icon::before {
    content: '\e825';
}
</style>

Render a dialog using utility functions

The dialog component provides built-in utility functions to render the alert and confirm dialogs with the minimal code. The following options are used as an argument on calling the utility functions:

Options Description
title Specifies the title of dialog like the header property.
content Specifies the value that can be displayed in dialog’s content area like the content property.
isModal Specifies the Boolean value whether the dialog can be displayed as modal or non-modal. For more details, refer to the isModal property.
position Specifies the value where the alert or confirm dialog is positioned within the document. For more details, refer to the position property { X: ‘center’, Y: ‘center’}
okButton Configures the OK button that contains button properties with the click events. okButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for OK button click', text: 'Yes' // <-- Default value is 'OK' }
cancelButton Configures the Cancel button that contains button properties with the click events. cancelButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for ‘Cancel’ button click', text: 'No' // <-- Default value is 'Cancel'}
isDraggable Specifies the value whether the alert or confirm dialog can be dragged by the user.
showCloseIcon When set to true, the close icon is shown in the dialog component.
closeOnEscape When set to true, you can close the dialog by pressing ESC key.

Alert dialog

An alert dialog box is used to display warning like messages to the users. Use the following code to render a simple alert dialog in an application.

Source
Preview
app.vue
<template>
    <div>
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open Alert Dialog</ejs-button></center>
    </div>
</template>
<script>
import Vue from 'vue';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);

export default {
    data: function() {
        return { }
    },
    methods: {
        dialogBtnClick: function() {
            DialogUtility.alert('This is an Alert Dialog!');
        }
    }
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

Render an alert dialog with options

Source
Preview
app.vue
<template>
    <div>
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open Alert Dialog</ejs-button></center>
    </div>
</template>
<script>
import Vue from 'vue';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);

export default {
    data: function() {
        return { }
    },
    methods: {
        dialogBtnClick: function() {
            DialogUtility.alert({
            title: 'Alert Dialog',
            content: "This is an Alert Dialog!",
            okButton: {  text: 'OK', click: this.okClick },
            showCloseIcon: true,
            closeOnEscape: true
            });
        },
        okClick: function() {
            alert('you clicked OK button');
        }
    }
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

Confirm dialog

A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.

Source
Preview
app.vue
<template>
    <div>
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open Confirm Dialog</ejs-button></center>
    </div>
</template>
<script>
import Vue from 'vue';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);

export default {
    data: function() {
        return { }
    },
    methods: {
        dialogBtnClick: function() {
            DialogUtility.confirm('This is a Confirmation Dialog!');
        }
    }
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

Render a confirmation dialog with options

Source
Preview
app.vue
<template>
    <div>
        <center><ejs-button ref='button' id="dialogbtn" cssClass="e-info" v-on:click.native="dialogBtnClick">Open Confirm Dialog</ejs-button></center>
    </div>
</template>
<script>
import Vue from 'vue';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
Vue.use(DialogUtility);

export default {
    data: function() {
        return { }
    },
    methods: {
        dialogBtnClick: function() {
            //  Initialize and render Confirm dialog with options
            DialogUtility.confirm({
                title: ' Confirmation Dialog',
                content: "This is a Confirmation Dialog!",
                okButton: {  text: 'OK', click: this.okClick },
                cancelButton: {  text: 'Cancel', click: this.cancelClick },
                showCloseIcon: true,
                closeOnEscape: true
            });
        },
       okClick: function() {
            alert('you clicked OK button');
        },
        cancelClick: function() {
            alert('you clicked Cancel button');
        }
    }
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
    #app {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>