HelpBot Assistant

How can I help you?

Getting started in EJ2 JavaScript Dialog control

10 Feb 202624 minutes to read

This section explains the steps required to create a simple Essential^® JS 2 Button and demonstrate the basic usage of the Button control in a JavaScript application.

Dependencies

The list of dependencies required to use the Button component in your application is given below:

|-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons

Setup for local environment

Refer to the following steps to set up your local environment.

Step 1: Create a root folder named my-app for your application.

Step 2: Create a my-app/resources folder to store local scripts and styles files.

Step 3: Open Visual Studio Code and create my-app/index.js and my-app/index.html files to initialize the Essential^® JS 2 Button control.

Adding Syncfusion^® resources

The Essential^® JS 2 Button control can be initialized by using either of the following ways.

Using local script and style.
Using CDN link for script and style.

Using local script and style references in a HTML page

Step 1: Create an app folder myapp for Essential^® JS 2 JavaScript controls.

Step 2: You can get the global scripts and styles from the Essential Studio^® JavaScript (Essential^® JS 2) build installed location.

Syntax:

Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.css

Example:

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-popups/dist/global/ej2-popups.min.js

Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-popups/styles/material.css

Step 3: Create a folder myapp/resources and copy/paste the global scripts and styles from the above installed location to myapp/resources location.

Step 4: Create a HTML page (index.html) in myapp location and add the Essentials JS 2 script and style references.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
            <!-- Essential JS 2 material theme -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />

            <!-- Essential JS 2 Dialog's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Step 5: Now, add the Dialog element and initiate the Essential^® JS 2 Dialog control in the index.html by using following code

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2</title>
            <!-- Essential JS 2 material theme -->
            <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
            <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />

            <!-- Essential JS 2 Dialog's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>

            <style>
                #container {
                    min-height: 300px;
                }
            </style>
       </head>
       <body>
            <div id="container">
                <!-- Add the HTML <div> element  -->
                <div id="dialog"></div>
            </div>
            <script>
                //Initialize Dialog control
                var dialog = new ej.popups.Dialog({
                    // Dialog content
                    content: 'This is a Dialog with content',
                    // The Dialog shows within the target element
                    target: document.getElementById("container"),
                    // Dialog width
                    width: '250px'
                });
                // Render initialized Dialog
                dialog.appendTo('#dialog');
            </script>
       </body>
  </html>

Step 6: Now, run the index.html in web browser, it will render the Essential^® JS 2 Dialog control.

Using CDN link for script and style reference

Step 1: Create an app folder myapp for the Essential^® JS 2 JavaScript controls.

Step 2: The Essential^® JS 2 control’s global scripts and styles are already hosted in the below CDN link formats.

Syntax:

Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css

Example:

Script: http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js

Styles: http://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css

Step 3: Create a HTML page (index.html) in myapp location and add the CDN link references. Now, add the Dialog element and initiate the Essential^® JS 2 Dialog control in the index.html by using following code.

index.js
index.html
ej.base.enableRipple(true);

// Initialization of Dialog
var dialog = new ej.popups.Dialog({
    // Dialog content
    content: 'This is a Dialog with content',
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px'
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function() {
    // Call the show method to open the Dialog
     dialog.show();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Step 4: Now, run the index.html in web browser, it will render the Essential^® JS 2 Dialog control.

In the dialog control, max-height is calculated based on the dialog target element height. If the target property is not configured, the document.body is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element.

A modal dialog displays an overlay behind the dialog, requiring the user to interact with it before accessing other content in the application.

When the user clicks the overlay, the action can be handled through the overlayClick event. In the sample below, the dialog closes when clicking the overlay.

When the modal dialog is opened, the Dialog’s target scrolling will be disabled. The scrolling will be enabled again once close the Dialog.

index.js
index.html
ej.base.enableRipple(true);

// Initialize Dialog component
var dialog = new ej.popups.Dialog({
    // Enables modal dialog
    isModal:true,
    // overlayClick event handler
    overlayClick: onOverlayClick,
    // Dialog content
    content: 'This is a modal dialog',
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px'
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function() {
    // Call the show method to open the Dialog
    dialog.show();
}

// Sample level code to hide the Dialog when click the Dialog overlay
function onOverlayClick() {
    dialog.hide();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Modal Dialog</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Modal Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Enable header

The Dialog header can be enabled by adding the header content as text or HTML content through the header property.

index.js
index.html
ej.base.enableRipple(true);

// Initialization of Dialog component
var dialog = new ej.popups.Dialog({
    // Enables the header
    header: 'Dialog',
    // Enables the close icon button in header
    showCloseIcon: true,
    // Dialog content
    content: 'This is a dialog with header',
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px',
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function() {
    // Call the show method to open the Dialog
     dialog.show();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog with header</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Configure action buttons

The dialog provides built-in support to render action buttons on the footer (for example: ‘OK’ or ‘Cancel’ buttons) using the buttons property. Each dialog button allows users to perform actions when clicked.

The primary button receives focus automatically when the dialog opens. Add the click event to handle button actions.

When the dialog is initialized with multiple primary buttons, the first primary button receives focus when the dialog opens.

The sample below demonstrates buttons and their actions:

index.js
index.html
ej.base.enableRipple(true);

// Initialize Dialog component
var dialog = new ej.popups.Dialog({
    // Enables the footer buttons
    buttons: [
        {
            // Click the footer buttons to hide the Dialog
            'click': () => {
                dialog.hide();
            },
            // Accessing button component properties by buttonModel property
            buttonModel: {
                //Enables the primary button
                isPrimary: true,
                content: 'OK'
            }
        },
        {
            'click': () => {
                dialog.hide();
            },
            buttonModel: {
                content: 'Cancel'
            }
        }
    ],
    // Enables the header
    header: 'Dialog',
    // Dialog content
    content: 'This is a Dialog with button and primary button',
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px'
});

// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function() {
    // Call the show method to open the Dialog
    dialog.show();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog with footer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Draggable

The Dialog supports to drag within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically.

The Dialog can be draggable only when the Dialog header is enabled. From 16.2.x version, enabled draggable support for modal dialog also.

index.js
index.html
ej.base.enableRipple(true);

var dialog = new ej.popups.Dialog({
    // Enables the draggable option
    allowDragging: true,
    // Enables the header
    header: 'Dialog',
    // Dialog content
    content: 'This is a Dialog with drag enabled',
    // Enables the draggable option
    allowDragging: true,
    // Enables the footer buttons,
    buttons: [
        {
            // Click the footer buttons to hide the Dialog
            'click': () => {
                dialog.hide();
            },
            // Accessing button component properties by buttonModel property
            buttonModel:{
                //Enables the primary button
                isPrimary: true,
                content:'OK'
            }
        },
        {
            'click': () => {
                dialog.hide();
            },
            buttonModel:{
                content:'Cancel'
            }
        }
    ],
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px',
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function() {
    // Call the show method to open the Dialog
     dialog.show();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog with draggable support</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="padding: 20px;">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Positioning

The Dialog can be positioned using the position property by providing the X and Y co-ordinates. It can be positioned inside the target of the container or <body> of the element based on the given X and Y values.

for X is: left, center, right (or) any offset value
for Y is: top, center, bottom (or) any offset value

The below example demonstrates the different Dialog positions.

index.js
index.html
var dialog = new ej.popups.Dialog({
    // Set Dialog position
    position: { X: 'center', Y: 'center' },
    // Disable the Esc key option to hide the Dialog
    closeOnEscape: false,
    // Enables the close icon button in header
    showCloseIcon: true,
    // Enables the header
    header: 'Choose a Dialog Position',
    // The dialog shows within the target element
    target: document.getElementById('target'),
    // Dialog width
    width: '440px',
    open: dialogOpen,
    close: dialogClose,
    //Dialog footerTemplate
    footerTemplate: '<span id="posvalue" style="float:left;margin-left:8px;padding:10px;">Position: { X: "Center", Y: "Center" }</span>'
});
// Render initialized Dialog
dialog.appendTo('#dialog');

var onChangeHandler = function (args) {
    dialog.position.X = args.value.split(' ')[0];
    dialog.position.Y = args.value.split(' ')[1];
    var txt = args.event.target.parentElement.querySelector('.e-label').innerText.split(' ');
    document.getElementById('posvalue').innerHTML = 'Position: { X: "' + txt[0] + '", Y: "' + txt[1] + '" }';
};

var radioButton = new ej.buttons.RadioButton({ label: 'Left Top', value: 'left top', change: onChangeHandler });
radioButton.appendTo('#radio1');
radioButton = new ej.buttons.RadioButton({ label: 'Center Top', value: 'center top', change: onChangeHandler });
radioButton.appendTo('#radio2');
radioButton = new ej.buttons.RadioButton({ label: 'Right Top', value: 'right top', change: onChangeHandler });
radioButton.appendTo('#radio3');
radioButton = new ej.buttons.RadioButton({ label: 'Left Center', value: 'left center', change: onChangeHandler });
radioButton.appendTo('#radio4');
radioButton = new ej.buttons.RadioButton({ label: 'Center Center', value: 'center center', change: onChangeHandler, checked: true });
radioButton.appendTo('#radio5');
radioButton = new ej.buttons.RadioButton({ label: 'Right Center', value: 'right center', change: onChangeHandler });
radioButton.appendTo('#radio6');
radioButton = new ej.buttons.RadioButton({ label: 'Left Bottom', value: 'left bottom', change: onChangeHandler });
radioButton.appendTo('#radio7');
radioButton = new ej.buttons.RadioButton({ label: 'Center Bottom', value: 'center bottom', change: onChangeHandler });
radioButton.appendTo('#radio8');
radioButton = new ej.buttons.RadioButton({ label: 'Right Bottom', value: 'right bottom', change: onChangeHandler });
radioButton.appendTo('#radio9');
document.getElementById('dialogBtn').onclick = function () {
    dialog.show();
};

function dialogOpen() {
    document.getElementById('dialogBtn').style.display = 'none';
}

function dialogClose() {
    document.getElementById('dialogBtn').style.display = 'block';
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog Positioning</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="dialogBtn" role="button" e-ripple="true" style="position: absolute;">Open Dialog</button>
        <div id="dialog">
          <table style="width:405px;" id="poschange">
          <tbody><tr> 
            <td><input id="radio1" type="radio" name="xy"></td> 
            <td><input id="radio2" type="radio" name="xy"></td> 
            <td><input id="radio3" type="radio" name="xy"></td> 
          </tr> 
          <tr> 
            <td><input id="radio4" type="radio" name="xy"></td>
            <td><input id="radio5" type="radio" name="xy"></td>
            <td><input id="radio6" type="radio" name="xy"></td>
          </tr> 
          <tr> 
            <td><input id="radio7" type="radio" name="xy"></td>
            <td><input id="radio8" type="radio" name="xy"></td>
            <td><input id="radio9" type="radio" name="xy"></td>
          </tr>
          </tbody></table>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting started in EJ2 JavaScript Dialog control

Dependencies

Setup for local environment

Adding Syncfusion^® resources

Using local script and style references in a HTML page

Using CDN link for script and style reference

Enable header

Configure action buttons

Draggable

Positioning

See Also

How can I help you?

Getting started in EJ2 JavaScript Dialog control

Dependencies

Setup for local environment

Adding Syncfusion® resources

Using local script and style references in a HTML page

Using CDN link for script and style reference

Modal dialog

Enable header

Configure action buttons

Draggable

Positioning

See Also

Adding Syncfusion^® resources