Dim the background when opening window / modal div

Question

Dim the background when opening window / modal div

Navigation

#1 by (4 votes)

2

I tried to create something like modal , like this:

.try-modal{ 
    position: absolute;
    top:35%;
    left:25%;
    right: 25%;
    width: 50%;
    height: 400px;
    background-color: white;
    z-index: 2;
}

I call <div class="try-modal"> with Jquery , so far so good. But now I wanted the back, after this "modal" to appear, what was in the background would be kind of dark as if it were the bootstrap modal. Is there any code or tricks to do this?

html css

asked by anonymous 08.06.2016 / 16:32

1 answer

Change the color of edittext and selection in edittext Simple question about for loop

score 4 · Accepted Answer

Considering that all the functionality is ok (as you stated in the question), just make it add a 2nd element, done that, control the display with z-index .

Example:

.try-modal-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(#000, .4);
    z-index: 2;
}
.try-modal{
    position: absolute;
    top:35%;
    left:25%;
    right: 25%;
    width: 50%;
    height: 400px;
    background-color: white;
    z-index: 3; 
}

So the element try-modal-overlay will be behind your modal and with a transparent black background.

An alternative would be to use the :before element in its css , eliminating the need to add another element with jQuery .

.try-modal:before {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(#000, .4);
    z-index: 2;
}
.try-modal {
    ...[demais estilos]...
    z-index: 3; //Não esqueça de alterar esse index também
}

I particularly prefer the first option because it gets more targeted, but it's up to you.