Jump to content

lightbox or greybox? (was creating a temporary event?)


Elemental

Recommended Posts

if you see the modal dialog flashing, perhaps you should have it set to display:none in the CSS by default.

Link to comment
Share on other sites

if you see the modal dialog flashing, perhaps you should have it set to display:none in the CSS by default.
Visibility should work, too. The key is setting it with CSS so that by default the dialog is hidden and is only displayed if the user has never visited.
Link to comment
Share on other sites

thescientist, ShadowMage, Thank you again, your tag-team approach was much appreciated. ShadowMage - thanks for the explanation; I actually understood what you wrote... scary, right? FYI,display:none; did not work for me (IE or FF), it kept the modal and event information dialog box hidden, and I cleared the cookie twice; however, visibility:hidden; worked like a charm. Unless a reply is required I'm good to go, thanks again; however, here's my CSS just in case...

#modal{position:fixed;visibility:hidden;  // this is the only change due to your commentz-index:900;width:100%;height:100%;top:0;left:0;padding-top:10px;background:url(images/background-gradient.png);} #modal-header{width:700px;height:30px;margin:0 auto -12px auto;padding:0;background:#ffffff url(images/gradient-bar.png) left center no-repeat;border-top:2px solid #FF9900;border-right:2px solid #FF9900;border-bottom:1px solid #ff9900;border-left:2px solid #FF9900;} #clsBtn{position:relative;float:right;top:4px;right:12px;margin:0 auto;width:20px;height:20px;} #modal-header span a{background:url(images/x-Black.png) center no-repeat;border:1px solid #000000;} #modal-header span a:hover{background:url(images/x-Red.png) center no-repeat;border:1px solid #cd0a0a;} #eventInfo{position:relative;width:700px;height:auto;margin:0 auto;padding:0;font-family:'times new roman','century schoolbook','courier new',georgia;background:#ffffff;border-top:0;border-right:2px solid #FF9900;border-bottom:2px solid #FF9900;border-left:2px solid #FF9900;} #eventInfo p{text-align:center;} #eventInfo-title{margin:12px auto 0 auto;padding:10px 0;font-size:30pt;font-weight:bold;} #eventInfo-sub-title{margin:0px auto 15px auto;font-size:18pt;font-weight:bold;font-style:italic;} #eventInfo img{width:200px;height:180px;margin:0 auto;padding:0;border:2px solid #000;} .style_01{margin:10px auto;font-size:14pt;} .style_02{margin:0 auto;font-size:20pt;font-weight:bold;} .style_02 span{display:block;font-size:16pt;} #register{margin:15px auto 0 auto;font-size:20pt;} #register span{display:block;margin:0px auto 0 auto;font-size:10pt;color:#000000;} #eventInfo p a {outline:0;border:none;font-weight:bold;} #eventInfo p a:link {color:#c00;}#eventInfo p a:visited {color:#c00;}#eventInfo p a:hover {color:#0cf;}

Peace,Elemental

Link to comment
Share on other sites

ShadowMage - thanks for the explanation; I actually understood what you wrote... scary, right?
Yeah. :P I'm not very good at putting explanations into words other people can understand, but apparently I did it right this time.
display:none; did not work for me (IE or FF), it kept the modal and event information dialog box hidden, and I cleared the cookie twice; however, visibility:hidden; worked like a charm.
If you set display in the CSS, you'll need to modify display (set it to block) in the JavaScript, too, instead of visibility. It doesn't really matter whether you use display or visibility in this case, though, because as I said, the key is setting it initially in CSS.
Unless a reply is required I'm good to go, thanks again
Glad to hear you got it working. ^_^ Persistence usually pays off.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...