Render a dialog without header in EJ2 JavaScript Dialog control

8 May 20234 minutes to read

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.


// Initialization of Dialog component
var dialog = new ej.popups.Dialog({
    buttons: [
            // Click the footer buttons to hide the Dialog
            'click': function () {
            // Accessing button component properties by buttonModel property
            buttonModel: {
                //Enables the primary button
                isPrimary: true,
                content: 'OK'
            'click': function () {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
    // Dialog content
    content: 'This is a dialog without header',
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px',

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

// Render initialized Dialog
<!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="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
<script src="" type="text/javascript"></script>
<script src="" type ="text/javascript"></script>

    <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>

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