joemama718 Posted October 6, 2007 Share 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 Link to comment Share on other sites More sharing options...
awesomegamer Posted October 13, 2007 Share 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 Link to comment Share on other sites More sharing options...
joemama718 Posted October 14, 2007 Author Share 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 Link to comment Share on other sites More sharing options...
Prash Posted December 9, 2007 Share 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 Link to comment Share on other sites More sharing options...
Fly America Virtual Posted December 11, 2007 Share Posted December 11, 2007 Get Google Toolbar It Helps Alot With PopUp's Or Go With Firefox It Contains A Google Toolbar Quote Link to comment Share on other sites More sharing options...
ShannenName Posted December 13, 2007 Share 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 Link to comment Share on other sites More sharing options...
BabeWatcher Posted January 2, 2008 Share 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 Link to comment Share on other sites More sharing options...
dcvqksyb Posted January 13, 2008 Share 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 Link to comment Share on other sites More sharing options...
ShannenName Posted January 13, 2008 Share Posted January 13, 2008 While searching the web I also found this: Dynamic Drive DHTML popup Quote Link to comment Share on other sites More sharing options...
Wizard Posted February 11, 2008 Share 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 Link to comment Share on other sites More sharing options...
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.