Menu
I am trying to implement a lightbox / modal box type of popup in javascript without using jquery, scriptaculous, prototype or any library whatsoever. I found a very good start right here on stackoverflow:
How to code a JavaScript modal popup (to replace Ajax)? (no point repeating the code here)
I tried to make simple changes and all worked fine, i even added HTML content and it worked, but I am stuck on adding scrollbars, I did my research and found nothing since almost every answer you get on google is based on jquery (even all the other answers to the question I mentioned above include jquery!) Any suggestions or links would be great,
thanks
532
asked Jul 28 '26 02:07
I think this article named "CSS OVERLAY TECHNIQUES" will help you. http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
It provides several methods of accomplishing the above task without jquery.
For example one of the techniques described via this link is:
TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT
The first way that an overlay can be created is by absolutely positioning an HTML element on the page. There would be an empty div in the markup, and with CSS this div is positioned absolutely and given a high z-index value to make sure it stays on top of all other elements on the page, except the modal which is opened on top of this overlay, which will get a even higher z-index than the overlay.
<html> <body> <div class="overlay"></div> <!--...--> <body> <html>Supposing we have already added an empty div to the markup and given it a class .overlay, the CSS to position this overlay on the page is:
html, body{ min-height: 100%; } body{ position: relative; } .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); /*dim the background*/ }
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With