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; } Quote Link to comment 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? Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment 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 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.