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; 
  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

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?

  • 1
    \$\begingroup\$ I read this article not long ago - it might be useful to you. \$\endgroup\$
    – Oram
    Commented Dec 17, 2018 at 8:06
  • 2
    \$\begingroup\$ Your script is better that I can make, but I think some people would suggest you seperate the html and the script. Something like document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); \$\endgroup\$
    – Hans Dash
    Commented Dec 17, 2018 at 15:19
  • \$\begingroup\$ @guest271314 - can you provide some code? \$\endgroup\$ Commented Dec 17, 2018 at 22:41
  • \$\begingroup\$ @KamilKiełczewski One approach, though not yet rendered exactly the same as at the question is the use <input type="checkbox">, CSS :checked and adjacent sibling selector + jsfiddle.net/ng6eo7y4/2 \$\endgroup\$ Commented Dec 17, 2018 at 23:15
  • \$\begingroup\$ @guest271314 I think your proposition is not yet production ready \$\endgroup\$ Commented Dec 17, 2018 at 23:21

1 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';
      const popupContentClass = '.popup';
      const popupElement = document.querySelector(popupContentClass);
      popupElement.innerHTML = message;
      //... but please be aware of potential Cross Site Request Forgery vulnerability here!


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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.