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.

• javascript
• html
• css
• modal-dialog

Share Improve this question Follow edited Mar 27, 2017 at 1:25 Extricate 81122 gold badges1616 silver badges2828 bronze badges asked Mar 19, 2017 at 11:27 younisyounis 14722 silver badges66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Let'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.