Show Modal in front of all controls

[Gerardo]

I have a Community license to develop with JS2 JavaScript in an ASP.NET MVC 8.0 project. I integrated the "Sidebar" and "Appbar" controls into _Layout.cshtml, as well as a Bootstrap 5 Modal window. The problem I'm having is that when the Modal is displayed, it appears behind the Backdrop. I've tried applying z-index='99999' but haven't been able to fix this.

Attachment: Captura_ebc3c3b7.PNG

[Sivakumar ShunmugaSundaram]

Hi Gerardo,

To make a Bootstrap 5 Modal appear above the Syncfusion JavaScript Sidebar and Appbar controls in your project's _Layout.cshtml, you'll need to address the z-index conflict between these components. When using the Sidebar with showBackdrop property enabled, it creates an overlay that can block other elements like your Bootstrap Modal. The Sidebar's backdrop and the AppBar might have higher z-index values than your Bootstrap Modal.

Solution:

There are two approaches to fix this issue:

1. Modify the z-index of the Bootstrap Modal

Add the following CSS to your project to increase the z-index of the Bootstrap Modal and its backdrop:

/* Increase Bootstrap Modal z-index */

.modal {

    z-index: 1060 !important; /* Higher than Syncfusion components */

}

.modal-backdrop {

    z-index: 1050 !important; /* Just below modal but higher than Syncfusion components */

}

2. Adjust Syncfusion Sidebar z-index

For the Syncfusion Sidebar specifically, you can set its z-index to a lower value when using the overlay type: This can be able to achieve by using zIndex property in sidebar component.

Important Notes:

1. The Sidebar's backdrop is designed to block user interaction with the main content, which is why it's appearing above your modal.
2. If you're using the Sidebar in overlay mode, setting the zIndex property is especially important.
3. Consider the proper stacking order of all components in your application to ensure proper layering.

Please review the shared details and get back to us if you need any further assistance.

Regards,

Sivakumar S