JSFiddle - React, Tailwind, and code Playground

HTML

<div id=page>
  <b>Page Content</b><br>
  <a href="#" onclick="overlay_open()">Click here to open overlay</a>
  
  <div id=overlay>
    <div id=overlay_content>
    <b>Overlay Content</b>.<br>
      Select the text from this input, but overshoot when dragging so you release the click in the background.<br>
      <input type=text value="Some Text" length=30>
    </div>
  </div>
  
</div>

CSS

#overlay {
  display:none;
  align-items:center;
  justify-content:center;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(0,0,0,0.5);
}
#overlay.open {
  display:flex;
}

#overlay_content {
  position:relative;
  width:40%;
  height:40%;
  background-color:#e8e8ff;
}

JavaScript

const ele_overlay = document.getElementById('overlay');
const ele_overlay_content = document.getElementById('overlay_content');

function overlay_open(){
	ele_overlay.classList.add('open');
}

function overlay_close(){
	ele_overlay.classList.remove('open');
}

ele_overlay.addEventListener('click', overlay_close, false);

ele_overlay_content.addEventListener('mousedown', (v)=>{
	ele_overlay.removeEventListener('click', overlay_close);
}, false);

ele_overlay_content.addEventListener('mouseup', (v)=>{
	ele_overlay.removeEventListener('click', overlay_close);
  setTimeout(()=>{ele_overlay.addEventListener('click', overlay_close, false);}, 1000);
}, false);

ele_overlay.addEventListener('mouseup', (v)=>{
  setTimeout(()=>{ele_overlay.addEventListener('click', overlay_close, false);}, 1000);
}, false);