Ignoring User Input Events From Pure HTML: Introducing the Inert Attribute

<!--not inert-->
<div>
  <p>not inert</p>
  <button>button</button>
  <input type ="text" />
</div>

<!--inert-->
<div inert>
   <p>inert</p>
   <button>button</button>
   <input type ="text" />
</div>

<style>
   body{
       font-size: 15px;
   }
   .popup_modal{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        color: white;
        background: rgba(0,0,0,0.8);
        padding: 20px;
   }
</style>
<div inert>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dolor lorem, condimentum at magna quis, bibendum dictum massa. Mauris gravida porttitor mauris, vitae fermentum ex faucibus nec. Vestibulum finibus, mi id blandit pharetra, tortor tellus euismod dolor, ac pellentesque quam purus sed tellus. Sed scelerisque lacus eu tortor malesuada, quis vehicula urna sollicitudin. Curabitur posuere, erat vitae finibus eleifend, elit sem venenatis tellus, sit amet congue sapien risus eu urna. Nunc consequat suscipit felis ut convallis. Curabitur cursus enim libero, vel semper dolor ullamcorper nec. Nunc pharetra orci egestas diam feugiat viverra. Morbi et ligula tempor, sagittis nunc eu, rutrum magna. Curabitur luctus maximus nulla, ac blandit lorem facilisis vitae. Donec sit amet condimentum lacus. Donec sed sapien scelerisque, feugiat mi mattis, efficitur ex. Nunc bibendum, justo et congue efficitur, sem augue laoreet velit, a volutpat ipsum sapien in sem. Nunc ac urna feugiat, interdum erat eu, semper nibh. Pellentesque non porta ipsum, ut efficitur lectus.
     <button>button</button>
</div>
<div class="popup_modal">
     <h4>Header</h4>
     <p>User can only focus on this popup, even some that is not fully covered by the popup modal, the rest of page is not clickable/selectable</p>
     <button id="button2">button</button>
     <input type ="text" />
</div>