adam84 Posted May 16, 2011 Share Posted May 16, 2011 Hi, I am trying to create a CSS popup. I have provided my code below. I want to have the popUpDiv appear in the top left corner of the screen. But for some reason it appears in the middle of the screen. Any ideas on what my issue is? Thanks HTML <body> <div id="blanket" style="display:none;"></div> <div id="popUpDiv" style="display:none;"> <div name="updateDIV" id="updateDIV"></div> </div> <div name="content" id="content"> text </div> </body> CSS #blanket { background-color: #111; opacity: 0.65; filter: alpha(opacity=65); position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; } #popUpDiv { position: absolute; left: 900px; top: 600px; background-color: #eeeeee; width: 900px; height: 600px; z-index: 2; } Link to comment https://forums.phpfreaks.com/topic/236569-css-pure-popup-help/ Share on other sites More sharing options...
cssfreakie Posted May 16, 2011 Share Posted May 16, 2011 which div do you mean do you mean? #blanket or #popUpDiv and on what event do you want it to appear? or is some javascript doing that? Link to comment https://forums.phpfreaks.com/topic/236569-css-pure-popup-help/#findComment-1216152 Share on other sites More sharing options...
adam84 Posted May 16, 2011 Author Share Posted May 16, 2011 The #blank div, turns the background dark, the #popUpDiv is the div that appears. I call a javascript function that makes changes the bg dark and makes the popup appear Link to comment https://forums.phpfreaks.com/topic/236569-css-pure-popup-help/#findComment-1216181 Share on other sites More sharing options...
cssfreakie Posted May 16, 2011 Share Posted May 16, 2011 Ok so implicitly you are saying that you want #popUpDiv to show up. right? More over you want it to show up in the top left corner if read your first post right. if that is the case try out to set the following properties: #popUpDiv { position: absolute; left: 0; /* i changed this */ top: 0; /* idem dito */ background-color: #eeeeee; width: 900px; height: 600px; z-index: 2; } Note though if you would have wrapped this div in another div with a state other than static and that one is positioned someone else on the screen this wont work. So make sure this is above all other mark up like you have it now. instead of an extra div to cover it, up you could have also set something like margin-left: -999em; and than set it to 0 with javascript Link to comment https://forums.phpfreaks.com/topic/236569-css-pure-popup-help/#findComment-1216216 Share on other sites More sharing options...
adam84 Posted May 20, 2011 Author Share Posted May 20, 2011 There is some javascript code that I over looked that caused it to overwrite the css of something, any ways I commented out a line and everything is all good and handy, thanks Link to comment https://forums.phpfreaks.com/topic/236569-css-pure-popup-help/#findComment-1218256 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.