5
\$\begingroup\$

After small research I found following informations: In this closed question I found some solution which not works good when pop-up has height bigger than screen (and some jquery solution). Here is question about show 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. some 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:

window.t = 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="t('.popupBg')">PopUP</div>

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

Here is a JSfiddle version.

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

Question2: Does approach used in snipped have some drawbacks?

\$\endgroup\$
  • 1
    \$\begingroup\$ I read this article not long ago - it might be useful to you. \$\endgroup\$ – Oram Dec 17 '18 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 Dec 17 '18 at 15:19
  • \$\begingroup\$ @guest271314 - can you provide some code? \$\endgroup\$ – Kamil Kiełczewski Dec 17 '18 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\$ – guest271314 Dec 17 '18 at 23:15
  • \$\begingroup\$ @guest271314 I think your proposition is not yet production ready \$\endgroup\$ – Kamil Kiełczewski Dec 17 '18 at 23:21
2
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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