Search results

Modal in JavaScript (ES5) SpeedDial control

25 Jan 2023 / 1 minute to read

You can use the modal property to set the Speed Dial as modal which adds an overlay to prevent the background interaction.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

// Initialize action items
var items = [
    { iconCss:'e-icons e-cut'},
    { iconCss:'e-icons e-copy'},
    { iconCss:'e-icons e-paste'}
];

// Initialize the SpeedDial control with modal
var speeddial = new ej.buttons.SpeedDial({
    items: items,
    openIconCss: 'e-icons e-edit',
    target: '#targetElement',
    modal: true
});

// Render initialized SpeedDial
speeddial.appendTo('#speeddial');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 SpeedDial</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <!-- Add the SpeedDial component styles. -->
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!-- Elements to render the SpeedDial component. -->
        <button id="speeddial" title="Edit"></button>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></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>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}