What cause the width of the element with position: fixed not relative to the viewport

Question

The code below is how I implement modals(popup screen).

$('.h-modal-btn').on('click', function() {
    $('.h-modal-bg').addClass('h-modal-bg-show');
      $('.h-modal').addClass('h-modal-show');
})
$('.h-modal-bg').on('click', function(e) {
    if (e.target == this) {
          $('.h-modal-bg').removeClass('h-modal-bg-show');
          $('.h-modal').removeClass('h-modal-show');
      }
})

.h-modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(33, 33, 33, 0.48);
  z-index: 10000;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;

  -webkit-transition: all 0.3s ease-out; 
  transition: all 0.3s ease-out;
}
.h-modal-bg-show {
  visibility: visible;
  opacity: 1;
}
.h-modal {
  position: relative;
  max-width: 640px;
  width: 90%;
  margin: -40px auto 0;
  background-color: #FFFFFF;
  border-radius: 20px;
  max-height: 80%;
  overflow-y: scroll;

  /*Uncomment if more animation is needed*/
  /*opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;*/
}
.h-modal-show {
  /*Uncomment if more animation is needed*/
  /*opacity: 1;
  transform: scale(1);*/
}
.h-modal-header {
  position: fixed;
  max-width: 640px;
  width: 90%;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 12px 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.h-modal-red .h-modal-header {
  background-color: #DE0716;
  color: #FFF;
}
.h-modal-black .h-modal-header {
  background-color: #343434;
  color: #FFF;
}
.h-modal-content {
    min-height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="h-modal-btn">Choose Location</button>
<div class="h-modal-bg">
    <div class="h-modal h-modal-black">
        <div class="h-modal-header">
             Choose Location
        </div>
        <div class="h-modal-content"></div>
        </div>
</div>

Please pay attention on the .h-modal class and .h-modal-show class. The code been commented is the problem. As you can see, my code now is work, every element is placed on the right place. But when I uncomment those code, the size of the modal header is not relative to the size of the viewport. Please someone correct my notions about positioning, thank you!

What cause the width of the element with position: fixed not relative to the viewport

0 Answers0