Bootstrap Modal Appearing under Background

Bootstrap Modal Appearing Under Background

One common issue that developers face when using Bootstrap modals is that the modal appears under the background content instead of on top of it. This can be frustrating, but fortunately, there are a few solutions to this problem.

Solution 1: Adjusting the z-index

The z-index property determines the stacking order of elements on a webpage. By default, Bootstrap sets the z-index of the modal backdrop to 1040 and the z-index of the modal itself to 1050. To ensure that the modal appears on top of the background, you can increase the z-index values.


.modal-backdrop {
    z-index: 1060;
}

.modal {
    z-index: 1070;
}

By setting the z-index of the modal backdrop to 1060 and the z-index of the modal to 1070, you can ensure that the modal appears on top of the background.

Solution 2: Using the modal-open class

Another solution is to add the modal-open class to the body element when the modal is opened. This class adds a padding-right to the body element to compensate for the scrollbar that appears when the modal is opened. This can prevent the modal from appearing under the background.


.modal-open {
    padding-right: 0 !important;
}

By setting the padding-right to 0 for the modal-open class, you can ensure that the modal appears on top of the background.

Solution 3: Using the modal-dialog-scrollable class

If you are using a scrollable modal, you can add the modal-dialog-scrollable class to the modal-dialog element. This class adds an overflow-y: auto property to the modal-dialog, allowing it to scroll within the modal. This can prevent the modal from appearing under the background.


.modal-dialog-scrollable {
    overflow-y: auto;
}

By adding the modal-dialog-scrollable class to the modal-dialog element, you can ensure that the modal appears on top of the background.

Conclusion

When the Bootstrap modal appears under the background, it can be frustrating for developers. However, by adjusting the z-index, using the modal-open class, or adding the modal-dialog-scrollable class, you can ensure that the modal appears on top of the background as intended.

Bootstrap Modal Appearing under Background