Modal in EJ2 JavaScript Speed dial control

10 May 20233 minutes to read
You can use the modal property to set the Speed Dial as modal which adds an overlay to prevent the background interaction.
index.js
index.html
styles.css
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');
<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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">
        <!-- 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>
#container {
    visibility: hidden;
}

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