How to keep Dialog fixed on page scroll in EJ2 JavaScript Dialog

4 Sep 20265 minutes to read

By default, when you scroll the page or container, the Dialog also scrolls along with it. When a user expects the Dialog to stay in the same position without scrolling, this can be achieved at the sample level as shown below. Here, the e-fixed class is added to the Dialog element by using the cssClass property, which prevents the Dialog from scrolling with the page. Note that e-fixed is not a built-in class; you must define it in your page styles as .e-fixed { position: fixed; }. In the following sample, the cssClass is applied dynamically in the #targetButton click handler.

ej.base.enableRipple(true);

// Initialize Dialog component
var dialog = new ej.popups.Dialog({
    // Enables the header
    header: 'Dialog',
    // Dialog content
    content: document.getElementById("dlgContent"),
    // Disable the Esc key to hide the Dialog
    closeOnEscape: false,
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px',
    beforeOpen: onBeforeopen
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to prevent Dialog scrolling
document.getElementById('targetButton').onclick = function() {
    dialog.cssClass = 'e-fixed';
}

function onBeforeopen() {
    document.getElementById('dlgContent').style.visibility = 'visible';
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog with scrollable content</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/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
        <div id="dialog"></div>
        <div id="dlgContent" style="visibility: hidden">
            <button class="e-control e-btn" id="targetButton" role="button">Prevent Dialog Scroll</button>
        </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>