Simple way to show popup

Question

After some research I found the following information: In this closed question I found a solution which does not work well when pop-up has height bigger than screen (and some jquery solution). Here is a question about showing outside page in popup. And here are some theoretical and angularJS solutions. However, those answers do not satisfy me.

I want to show a pop-up to user which contains my content (not loaded from URL) e.g. an editor. I am interested in only pure JS/HTML/CSS solutions (no jQuery or other libs). This is the code which I regularly use, and which was tested on Chrome, Safari, Firefox and Edge:

toggle = q => document.querySelector(q).classList.toggle('hide');

body { margin: 0; padding: 0; }
.btn { padding: 10px; background: #BADA55; border-radius: 5px; cursor: pointer}

.popupBg { 
  position: absolute;
  top: 0;
  left: 0;
  display: flex; 
  min-height: 100vh; 
  width: 100vw; 
  justify-content: center; 
  align-items:center; 
  background: rgba(255,0,0,0.5) 
}

.popup {
  width: 100px;
  min-height: 200px;
  border: 1px solid black;
  background: #88f;
  margin: 40px;
}

.hide {
  display: none;
}

<div class="example">Some content</div>
<div class="btn" onclick="toggle('.popupBg')">PopUP</div>

<div class="popupBg hide" onclick="toggle('.popupBg')" >
    <div class="popup" onclick="event.stopPropagation()" >
      My popup
    </div>
</div>

Here is a JSfiddle version.

Question1: Is there simpler way to show popup (similar to this in snipped and easy to modify) to user?

Question2: Does approach have any drawbacks?

Answer 1

General notes:

I will focus mainly on your second question as I cannot imagine simpler solution. I would even suggest to do it a little bit more complex in order to make CSS more scalable (in the terms of resolution and content size).

For instance you can consider using width: auto; for your .popup class in order to make it scale itself depending on internal content.

Another approach would be to set width and height fixed and use overflow:auto; in order to use some scrollbars as internal content grows bigger.

If you would like to make it simpler for the user (if you mean an user of your code) you can wrap it inside some API like:

function showPopup(message) {
      const popupContainerClass = '.popupBg';
      document.querySelector(popupContainerClass).classList.toggle('hide');
      const popupContentClass = '.popup';
      const popupElement = document.querySelector(popupContentClass);
      popupElement.innerHTML = message;
      //... but please be aware of potential Cross Site Request Forgery vulnerability here!
      popupElement.focus();
}

Question2:

Your approach is about hiding an element that in fact is always present in DOM. It usually has advantages because displaying popup will not consume any processing power.

But in some cases (for instance when your popup presence would solely cause complex computations, or require lot of memory -like some videos or animations) it would be considerable to completely remove it from DOM instead.