 |
 |
 |
|
07.22.08 JavaScript Custom LightBox  By Mads Kristensen A few people have asked me how to implement the div popup with a LightBox effect, like the one used when you click the Filter by APML link in the top right corner of this page. It's actually very easy and it's 100% JavaScript. First, we need to add the semi-transparent div to lie on top of the entire page. This is done like so: var width = document.documentElement.clientWidth + document.documentElement.scrollLeft; var layer = document.createElement('div'); layer.style.zIndex = 2; layer.id = 'layer'; layer.style.position = 'absolute'; layer.style.top = '0px'; layer.style.left = '0px'; layer.style.height = document.documentElement.scrollHeight + 'px'; layer.style.width = width + 'px'; layer.style.backgroundColor = 'black'; layer.style.opacity = '.6?; layer.style.filter += (”progid:DXImageTransform.Microsoft.Alpha(opacity=60)”); document.body.appendChild(layer); Next we add a div in the middle of the page on top of the semi-transparent layer. var div = document.createElement('div'); div.style.zIndex = 3; div.id = 'box'; div.style.position = (navigator.userAgent.indexOf('MSIE 6?) > -1) ? 'absolute' : 'fixed'; div.style.top = '200px'; div.style.left = (width / 2) - (400 / 2) + 'px'; div.style.height = '50px'; div.style.width = '400px'; div.style.backgroundColor = 'white'; div.style.border = '2px solid silver'; div.style.padding = '20px'; document.body.appendChild(div);
And finally we put some text and a link that closes the popup when clicked: var p = document.createElement('p'); p.innerHTML = 'Some text'; div.appendChild(p); var a = document.createElement('a'); a.innerHTML = 'Close window'; a.href = 'javascript:void(0)'; a.onclick = function() { document.body.removeChild(document.getElementById('layer')); document.body.removeChild(document.getElementById('box')); }; div.appendChild(a); I've tested this in Firefox 2+, Internet Explorer 6+, Safari 3 and Opera 9.23+ and it works in all of them. Here is an example HTML page that uses this method. It's very simple to copy and modify. Comments About the Author: Mads Kristensen currently works as a Senior Developer at Traceworks located in Copenhagen, Denmark. Mads graduated from Copenhagen Technical Academy with a multimedia degree in 2003, but has been a professional developer since 2000. His main focus is on ASP.NET but is responsible for Winforms, Windows- and web services in his daily work as well. A true .NET developer with great passion for the simple solution. http://www.madskristensen.dk/ |
|||||||||||||||||||
|
| ||
| -- JavaProNews is an iEntry, Inc. publication -- iEntry, Inc. 2549 Richmond Rd. Lexington KY, 40509 2008 iEntry, Inc. All Rights Reserved Privacy Policy Legal archives | advertising info | news headlines | free newsletters | comments/feedback | submit article |
