Backdrop behind modals

Hi. Try this:

.modal {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%) !important;
z-index: $z-index-modal;
overflow: hidden;
width: 100%;
background-color: $modal-bg-color;
}

Scroll below and you will see .
@media (min-width: $modal-inset-mode-break-point) {
// inset mode is when the modal doesn't fill the entire
// display but instead is centered within a large display
.modal {.....

Replace modal class with the following:
.modal {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) !important;
-moz-transform: translate(-50%, -50%) !important;
-o-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
z-index: $z-index-modal;
overflow: hidden;
width: 100%;
}

Make sure you remove .modal class that is in media query. If you don't know what I'm taking about, look for the following and remove .modal {...} as showing below:

@media (min-width: $modal-inset-mode-break-point) {
// inset mode is when the modal doesn't fill the entire
// display but instead is centered within a large display
.modal {
top: $modal-inset-mode-top;
right: $modal-inset-mode-right;
bottom: $modal-inset-mode-bottom;
left: $modal-inset-mode-left;
min-height: $modal-inset-mode-min-height;
width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
}