Problem with the div on the opacity background

Question

I am beginner web developer.

I have this code:

.modal {
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  display: inline-block;
  padding: 1em;
}

.modal__overlay {
  background: #000000;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  text-shadow: none;
  top: 0;
  z-index: 600;
}

.modal__wrap {
  position: relative;
  margin: 0 auto;
  width: 90%;
  margin-top: 30px;
  max-width: 600px;
  max-height: 600px;
  background-color: white;
  padding: 1.5em;
}

#modal__title {
  color: black;
  font-size: 18px;
  padding-top: 20px;
}

#modal__desc {
  margin: 0;
  color: black;
  font-size: 16px;
  padding-top: 1px;
}

.closePopupBtn {
  clear: both;
  color: white;
  background-color: #ED1B23;
  line-height: 1.65;
  display: block;
  width: 140px;
  height: 50px;
  text-align: center;
  font-size: 30px;
  margin: 10px auto;
  padding-bottom: 30px;
  cursor: pointer;
  text-transform: uppercase;
}

.modal input:focus~label {
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
}

input {
  position: absolute;
  top: -1000px;
}

.modal__overlay {
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: -100;
}

input:checked~.modal__overlay {
  background-color: black;
  opacity: 0.5;
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: 800;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="modal">
  <input id="modal__trigger" type="checkbox" />
  <label for="modal__trigger">pokaz</label>
  <div class="modal__overlay" role="dialog" aria-labelledby="modal__title" aria-describedby="modal_desc">
    <div class="modal__wrap">
      <img src="{{ asset('img/popup1.png') }}" class="img-fluid">
      <h2 id="modal__title">This is your modal content</h2>
      <p id="modal__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus.
        In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
      <label for="modal__trigger" class="closePopupBtn">Zamknij</label>
    </div>
  </div>
</div>

The code works fine, but the popup in the center of the screen is also transparent. I would like only the background to be transparent - the popup should not be transparent.

How to fix it?

Preview: http://serwer1356363.home.pl/pub/popup.html After click "show" I have animation. It's work fine. My problem is only with div with text

just increase opactity to 1 and change the background color as you want — Vignesh A, Apr 28 '20 at 17:58
`input:checked ~ .modal__overlay { background-color: transparent; opacity: 1; }` try this this worked for me — Vignesh A, Apr 28 '20 at 18:07

Nisharg Shah · Accepted Answer · 2020-04-28T18:17:21.717

Like this?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<div class="modal">
        <input id="modal__trigger" type="checkbox" />
        <label for="modal__trigger">pokaz</label>
        <div class="modal__overlay" role="dialog" aria-labelledby="modal__title" aria-describedby="modal_desc">
            <div class="modal__wrap">
                <img src="{{ asset('img/popup1.png') }}" class="img-fluid">
                <h2 id="modal__title">This is your modal content</h2>
                <p id="modal__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
                <label for="modal__trigger" class="closePopupBtn">Zamknij</label>
            </div>
        </div>
    </div>



    <style>
    .modal {
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding: 1em;
}

.modal__overlay {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    text-shadow: none;
    top: 0;
    z-index: 600;
}

.modal__wrap {
    position: relative;
    margin: 0 auto;
    width: 90%;

    margin-top: 30px;
    max-width: 600px;
    max-height: 600px;
    background-color: white;
    padding: 1.5em;
    z-index: 1000;
}

#modal__title {
    color: black;
    font-size: 18px;
    padding-top: 20px;
}

#modal__desc {
    margin: 0;
    color: black;
    font-size: 16px;
    padding-top: 1px;
}

.closePopupBtn {
    clear: both;
    color: white;
    background-color: #ED1B23;
    line-height: 1.65;
    display: block;
    width: 140px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    margin: 10px auto;
    padding-bottom: 30px;
    cursor: pointer;
    text-transform: uppercase;
}


.modal input:focus ~ label {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}

input {
    position: absolute;
    top: -1000px;
}


.modal__overlay {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -100;
    background-color: black;
}

.modal__overlay::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    background-color: white;
    opacity: 1;
}

input:checked ~ .modal__overlay {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 800;
}

input:checked ~ .modal__overlay::after {
    content: '';
    opacity: 0.5;
}


</style>

Almost perfect :) When the popup closes it closes you can see a black background — traffske, Apr 28 '20 at 18:10
it happens because the original color is black and that effect is also shown in your question code — Nisharg Shah, Apr 28 '20 at 18:13
I update my answer, in that new answer your problem was solved, Thanks!! — Nisharg Shah, Apr 28 '20 at 18:17

score 0 · Answer 2 · answered Apr 28 '20 at 17:55

0

You are setting tranbsparency

.modal__overlay {
opacity: 0; <---------- delete this line
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -100;

}

answered Apr 28 '20 at 17:55

Rogerio Santos

101
2

It's not help. When I remove this - my popup is visible when page was loaded. I need show this popup after click "show". Please try my code in preview :) – traffske Apr 28 '20 at 17:57
Set the opacity: 0 on father div .modal, an make the father div visible when needed – Rogerio Santos Apr 28 '20 at 18:00

Problem with the div on the opacity background

2 Answers2