How to prevent a BODY CSS rule from being reflected in a particular Element contained in it?

Question

I am creating a modal on a page, and as usual I want that when the modal is being rendered, the screen that is "underneath" it is blurred, dark. I have a class that represents my modal, and in it the _conteiner attribute contains exactly the HTML element that is rendered as modal and I did the following tweak to try to put the focus effect on the modal:

I diminished the brightness of the body, and tried to increase only the brightness of the modal, but the modal becomes dark because the style of the body overlaps his. I wonder if it is possible to ignore the inheritance for this property, or force the value used in the property (something similar to !Important in CSS files) to be what I define.

Answer 1

It is not possible, because the child elements are part of it.

The solution is to use a modal backlayer, which will also allow you to close the modal by clicking on it.

Example:

var openModalBtn = document.querySelector("#open-modal");
var modalBacklayer = document.querySelector("#modal-backlayer");
var modal = document.querySelector("#modal");

function openModal() {
  modal.classList.add('active');
}

function closeModal() {
  modal.classList.remove('active');
}

openModalBtn.addEventListener('click', () => { openModal() });
modalBacklayer.addEventListener('click', () => { closeModal() });

.modal {
  display: none; /* escondido até ter a classe "active" */
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index 100; /* pode ser maior, dependendo do seu site. */
  padding: 15px;
}

.modal.active {
  display: flex;
}

.modal-backlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;  
  z-index: 1; /* dentro do modal, atras do conteúdo */
}

.modal-content {
  position: relative;
  z-index: 2; /* na frente do backlayer */
  background-color: white;
  width: 400px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 15px;
}

<h1>Body Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus dui, suscipit sed purus nec, tempus pulvinar leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<button id="open-modal">Open modal</button>


<div class="modal active" id="modal">
  <div class="modal-backlayer" id="modal-backlayer"></div>
  
  <div class="modal-content">
    <h1>Modal Content</h1>
    <p>Morbi efficitur dignissim finibus. Morbi laoreet risus auctor, aliquam neque quis, cursus turpis. Ut in fringilla quam, nec ullamcorper erat. Nam vulputate ex non sapien maximus, nec accumsan nulla lacinia.</p>
  </div>
</div>