CSS: The background color of modal-box is not changing and it is not scrollable

Question

I want to change the background color of my modal-content. All code is working but background color always appears white. Also the box is not scrollable. I want to scroll it when I click inside the box.

.modal {
    font-weight: bold;
    display: none;
    position: fixed;
    z-index: 1;
    padding: 50px 0px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    / background-color: rgb(0, 0, 0, 0.4);
}

.modal-content {
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 500px;
    text-align: center;
    background-color: transparent;
}

You have a slash after `overflow: auto;` that probably prevent the next row to work. — Cheslab, May 19 '19 at 03:02

score 0 · Answer 1 · answered May 19 '19 at 07:14

0

insted of putting overflow: auto; its better to use overflow: scroll

answered May 19 '19 at 07:14

Sachin Maharjan

68
1
9

score 0 · Answer 2 · answered May 19 '19 at 07:38

Seems like you are trying to use rgb instead of rgba or vice versa.

rgb should take 3 parameters like the following: rgb(0, 0, 0);
rgba should take 4 parameters rgba(0, 0, 0, 0.4); 4th parameter is opacity.

In order to undestand the diffrence you can see the following question: Difference between hex colour, RGB, & RGBA and when should each they be used?

According to the scrollable, you can use overflow: auto; but you can use overflow: scroll; in order to say you want to enable scrollable model implicitly.

For more information about overflow property: CSS overflow Property

CSS: The background color of modal-box is not changing and it is not scrollable

2 Answers2