I have an example of my modal code here.
I can not figure out which part of the code makes the background darkened when the modal is open, please give me any hint, thank you.
I have an example of my modal code here.
I can not figure out which part of the code makes the background darkened when the modal is open, please give me any hint, thank you.
Share Improve this question edited Mar 27, 2017 at 1:25 Extricate 8112 gold badges16 silver badges28 bronze badges asked Mar 19, 2017 at 11:27 younisyounis 1472 silver badges6 bronze badges2 Answers
Reset to default 3Let's have a look at your .modal css!
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4); /* <-- this is the culprit */
}
The background-color: rgba(0,0,0,0.4); is the reason the background is greyed out. If you deactivate that one, or override it with a rgba that is lighter the darkened effect will be removed (for example, to remove the grey effect and reset it with a fully transparent black, set background-color: rgba(0,0,0,0) ).
rgba(0,0,0,0.4) means black (rgb(0,0,0)) but with only 40% opacity (the 0,4 at the end).
The reason that the modal shows a dark overlay is because the background-color is set to a dark color and the width and the height of the modal is set to 100%. Thus, the background of the modal is effectively the entire screen high and wide, and has the color that is set in your inline CSS. So whenever you activate the modal (by clicking the button), you show the fullscreen dark overlay.
It is the div with a black colour and opacity what makes the effect, that is
<div id="myModal" class="modal">
This div is hidden by default (via display: none), and is shown by JavaScript when the user clicks the "Open modal" button.