Jump to content

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


Recommended Posts

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

  • Like 1
Link to post
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 post
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 post
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.
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...