Backdrop behind modals

ionic-v1
1

Hey guys,
we’re developing a tablet app based on ionic.
To have nice modals on tablets we applied some styles. As a result we have nice centered modals. The problem is that i need a backdrop behind the modals since they are not fullscreen anymore. The behavior should be the same as in action sheets.
Does someone know how i can achieve this without modifying ionic itself?

Thanks in advance!
Regards Tino

2

No ideas around? :wink:

3

I have not dug into this but you could probably take advantage of the “:before” in css.

.modal_css_name:before{
content:’’;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:#000;
opacity:0.5;
}

4

Thanks for this!

It works somehow if i change the styles a bit. It’s a bit ugly because the :before is relative to the modal.
It also overlays the content area of the modal. The solution used in ActionSheets is much better but i need an extra parent element for this.

.modal { … overflow: visible; // not good }

&:before{
content:’’;
position:absolute;
left:-5000px;
right:-5000px;
top:-5000px;
bottom:-5000px;
background-color:#000;
opacity:0.5;
}

5

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);
}

6

How can I hide the backdrop behind $ionicModal in ionic-1 and then later add it?