CODEWITHSUNDEEP
cssreactjsbootstrap-4stylingreact-bootstrap
Deeroy
Deeroy

Reputation: 317

Change color of entire page

I have a button which creates a popup and makes the background of my page black. This works however it doesn't affect any bootstrap containers. I am currently using bootstrap 4 and react. enter image description here

My css for this pop is below

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0,0,0, 0.5) !important;
}
.popupInner {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    margin: auto;
    border-radius: 20px;
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    margin: auto;
    background: white;
}

Anyone have any insight on how to target these containers.

Upvotes: 0

Views: 35

Answers (1)

Max Hudson
Max Hudson

Reputation: 10206

Setting a z-index on popup will probably fix it (e.g. z-index: 1).

If that doesn't fix it, you may need to set a lower z-index on those bootstrap elements (e.g. z-index: 0)

Upvotes: 1

Related Questions