Different Backdrop Shading When Two Modals Are Displayed - css

Question

Using UI Bootstrap, I have a modal window as shown below. As per normal behavior, the rest of the site is shaded with a backdrop when the modal is opened, a shown below:
This modal itself can open another second modal. When this happens, the first modal is shaded in the same color as the rest of the site, as shown below:
However, my desired behavior when the second modal is open is for the rest of the site to have a darker shade for the backdrop and the first modal to have the normal shading. For example, this effect can be seen with two modals are opened in Twitter, as shown below:
This is the code that is used to display the first modal:
$rootScope.modalInstance = $uibModal.open({
templateUrl: 'WebApp/modalOne.html',
controller: 'modalOneController',
backdrop: 'static',
windowClass: 'app-modal-window'
});
And this displays the second modal:
$rootScope.modalInstance = $uibModal.open({
templateUrl: 'WebApp/modalTwo.html',
controller: 'modalTwoController',
backdrop: 'true',
windowClass: 'center-modal',
animation: false
});
And this is the relevant CSS:
.modal-backdrop,
.modal {
opacity: 0;
}
.app-modal-window.modal.in-add {
-webkit-animation: fadeIn 0.3s ease-out;
animation: fadeIn 0.3s ease-out;
}
.modal.in {
opacity: 1;
}
.modal-backdrop.in-add {
-webkit-animation: fadeIn 0.3s ease-out;
animation: fadeIn 0.3s ease-out;
}
.modal-backdrop.in {
animation: fadeInBackdrop 0.3s !important;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
.modal.in {
opacity: 1;
}
.app-modal-window.modal.in-remove {
-webkit-animation: fadeOut 0.2s ease-out;
animation: fadeOut 0.2s ease-out;
opacity: 0;
}
.modal-backdrop.in-remove {
-webkit-animation: fadeOutBackdrop 0.2s ease-out;
animation: fadeOutBackdrop 0.2s ease-out;
opacity: 0;
}
.modal.fade .modal-dialog, .modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeInBackdrop {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#keyframes fadeInBackdrop {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#-webkit-keyframes fadeOutBackdrop {
from {
opacity: 0.5;
}
to {
opacity: 0;
}
}
#keyframes fadeOutBackdrop {
from {
opacity: 0.5;
}
to {
opacity: 0;
}
}
.center-modal.modal {
text-align: center;
}
#media screen and (min-width: 768px) {
.center-modal.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.center-modal .modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Regarding the CSS, please note that I had to do some experimenting to change UI Bootstap's default animation to my requirements. These requirements were to fade in/out both the backdrop and modal simultaneously with no vertical movement animation of the modal. Therefore, the CSS might be a little messy.
Any help/advice is appreciated.