css modal show background content which makes less readable

Issue

As currently i am showing modal in react on click of button.
but problem is it is showing background content in modal portion also.
so, my modal content texts are conflicted with main content.
can someone please help me to solve this issue ? below is the code and current view of modal in below image

.order-view-modal {
    display: block;
    opacity: 0.8 !important;
    background-color: black;
    position: fixed;
    z-index: 10001 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
}

.order-view-modal-content {
    background-color: white;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
}

Solution

This is happening because you've added the opacity: 0.8 !important style to .order-view-modal. You're reducing the opacity of the order-view-modal element, and assuming order-view-modal-content is its child, that style gets applied to it as well.

What you could do is create another element inside order-view-modal that acts as the background, and add the opacity style to that. This way the opacity style will not apply to order-view-modal-content. Check out the snippet below.

.bg {
  display: block;
  background: red;
  width: 100%;
  height: 100%;
}

.order-view-modal {
  display: block;
  /* opacity: 0.8 !important; */
  /* background-color: black; */
  position: fixed;
  z-index: 10001 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* padding: 1rem; */
}


/* Background element styling */

.order-view-modal-bg {
  display: block;
  opacity: 0.8 !important;
  background-color: black;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.order-view-modal-content {
  background-color: white;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
}

<div class="bg">
  <!-- Modal markup -->
  <div class="order-view-modal">
    <div class="order-view-modal-bg"></div>
    <div class="order-view-modal-content"></div>
  </div>
  <!-- End modal markup -->

  <p>
    <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
    a flexible way for designing the web pages along with the text.
  </p>
  HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
  </p>
</div>

Solution for transition:

To add your transition, use a class like active as in the snippet below to control the state of the modal. On click of the button, the active class is added to the modal's classlist. The default vertical position is -100% and the active position is 0%. I've added the transition timing as 3s. If it feels long you can play around with it and find the sweet spot.

I've also added box-sizing: border-box to order-view-modal-bg in order to make the padding included in the height of the element.

$('#open-modal-btn').on('click', function() {
  $('#order-view-modal').addClass('active');
});

.bg {
  display: block;
  background: red;
  width: 100%;
  height: 100%;
}

.order-view-modal {
  display: block;
  /* opacity: 0.8 !important; */
  /* background-color: black; */
  position: fixed;
  z-index: 10001 !important;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  /* padding: 1rem; */

  /* Transition effect */
  transition: 3s ease-out; 
}

.order-view-modal.active{
  top: 0%;
}


/* Background element styling */

.order-view-modal-bg {
  display: block;
  opacity: 0.8 !important;
  background-color: black;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.order-view-modal-content {
  background-color: white;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg">
  <!-- Modal markup -->
  <div class="order-view-modal" id="order-view-modal">
    <div class="order-view-modal-bg"></div>
    <div class="order-view-modal-content"></div>
  </div>
  <!-- End modal markup -->
  
  <button id="open-modal-btn">Open Modal</button>

  <p>
    <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
    a flexible way for designing the web pages along with the text.
  </p>
  HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
  </p>
</div>

Answered By - Khalid Fazal