3

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

Community
  • 1
  • 1
Jack
  • 436
  • 5
  • 13

2 Answers2

3

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*/
}
Max Novich
  • 1,169
  • 9
  • 20
  • A link to a potential solution is always welcome, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. – IvanH Nov 17 '13 at 16:10
  • Thank you @IvanH. I'll note that for future. – Max Novich Nov 17 '13 at 16:17
  • You can edit also this answer. Otherwise it will be probably deleted. – IvanH Nov 17 '13 at 16:19
0

If you want a modal dialog for real, use window.showModalDialog:

returnVal = window.showModalDialog(uri[, arguments][, options]);

where

  • returnVal is a variant, indicating the returnValue property as set by the window of the document specified by uri.
  • uri is the URI of the document to display in the dialog box.
  • arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property.
  • options an optional string that specifies window ornamentation for the dialog box.

Note that a real modal stops javascript execution (like alert, confirm and prompt do), unlike fake modal dialogs created with libraries like jQuery.

Oriol
  • 274,082
  • 63
  • 437
  • 513