joemama718 Posted October 6, 2007 Posted October 6, 2007 Does anyone know how websites achieve the "pop ups" where the content appears in the middle above everything, and the rest of the website is dimmed? It seems to be an implementation of CSS or Javascript (aka AJAX), but I can't figure out what they do... For example, http://www.newgrounds.com/ uses this when you try to view a video - http://www.newgrounds.com/portal/view/402467. Click on "Watch this Video," and you'll see that the new video pops up. Anyone know how to do this? Quote
awesomegamer Posted October 13, 2007 Posted October 13, 2007 I really have no idea, but I guess they might do it in flash if it is a flash based website :/ Have you found a solution yet? Quote
joemama718 Posted October 14, 2007 Author Posted October 14, 2007 nope. =/ still looking. I'm thinking it's using javascript to change the x,y coordinates of a <div> object maybe...but I can't figure out how they darken the background like that. Quote
Prash Posted December 9, 2007 Posted December 9, 2007 It would be in flash but maybe not the whole page... it wont be javascript to dim rest of page but u can use a div to place the pop up Quote
Fly America Virtual Posted December 11, 2007 Posted December 11, 2007 Get Google Toolbar It Helps Alot With PopUp's Or Go With Firefox It Contains A Google Toolbar Quote
ShannenName Posted December 13, 2007 Posted December 13, 2007 He isn't interested in blocking them but making them! If anyone knows or finds out please post it here because I also am interested in how they do this! Quote
BabeWatcher Posted January 2, 2008 Posted January 2, 2008 He isn't interested in blocking them but making them! If anyone knows or finds out please post it here because I also am interested in how they do this! I guess it's a JavaScript in an external file ( <script src="url">), then a div is created (AppendNode), the new div gets a high z-index so it's at top of the page. How they blend the rest of the page I still have to find out. Quote
dcvqksyb Posted January 13, 2008 Posted January 13, 2008 CSS used to hide everything, second one is for FireFox and Mac, first for all others #overlayblackout { position: absolute; top: 0; left: 0; z-index: 90; background-color: #000; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } #overlayblackout_ffmac { position: absolute; top: 0; left: 0; z-index: 90; } JS used to add div tag // Set up our background and append it to the body. ourbody = document.getElementsByTagName("body").item(0); pbackground = document.createElement("div"); if(!(IsFirefoxMac())) { pbackground.setAttribute("id", movie_viewer.BACKGROUND_DIV); } else { // Mac Firefox can't handle opacity stuff, so let's do a workaround. movie_viewer.BACKGROUND_DIV = "overlayblackout_ffmac"; pbackground.setAttribute("id", movie_viewer.BACKGROUND_DIV); pbackground.style.backgroundImage = "url(http://img.ngfiles.com/blackbox.png)"; pbackground.style.backgroundRepeat = "repeat"; } pbackground.style.display = 'none'; ourbody.appendChild(pbackground); I hope this helps. Quote
ShannenName Posted January 13, 2008 Posted January 13, 2008 While searching the web I also found this: Dynamic Drive DHTML popup Quote
Wizard Posted February 11, 2008 Posted February 11, 2008 The theory is to create a mask above the body that darkens it, and then put a div on top that has normal colouring. I believe Abc got closest to the mark, and even fixed it for OSes. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.