I have looked at the simple example - and whilst that works I do not
know why mine doesn't.
When I click my link it shows the hidden div underneath the content on
the page -and it doesn't operate like a modal dialogue and doesn't
apply the overlay.
I am not getting any javascript errors and I'm just using the simple
css that was included in the project. I also still have no close
button.
I was hoping someone else might have stumbled along the same issues
and could better explain what's actually going on :)
The CSS I'm using:
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}
/* Container */
#simplemodal-container {height:320px; width:600px; color:#bbb;
background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container code {background:#141414; border-left:3px solid
#65B43D; color:#bbb; display:block; margin-bottom:12px; padding:4px
6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container .basic-modal-content {padding:8px;}
#simplemodal-container a.modalCloseImg {
background:url(../App_Themes/Images/x.png) no-repeat;
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-14px;
right:-18px;
cursor:pointer;
}
My panel that gets displayed:
<asp:Panel runat="server" ID="pnlMemberAgreement"
Visible="false" CssClass="basic-modal-content">
<uc4:MembersTerms ID="MembersTermsAgreement"
runat="server" />
</asp:Panel>
Which has no styles applied to it unless I change the cssClass to
simplemodal-container and change the styles to refer to class not id
(due this being a .net control).
Thanks,
Jen
On Jan 9, 9:23 am, Eric Martin <[email protected]> wrote:
> I would strongly suggest downloading the one of the demos [1], like
> the basic one, which will probably help answer all of your questions.
>
> -Eric
>
> [1]http://www.ericmmartin.com/projects/simplemodal-demos/
>
> On Jan 7, 7:57 pm, polarwarp <[email protected]> wrote:
>
> > I am using the jquery simplemodal code to display a div on a page.
>
> > I am pretty much calling .modal(); on the div, which has a class on
> > it, and I'm styling up that class - some issues though:
>
> > 1. How do I add a close button. Have seen that I can add a closeimg
> > style - but I can't get anything with this class to appear. I figure
> > I need to set the closehtml property to something but haven't figured
> > out what. As this is embedded in c# I might have stuffed up my string
> > escaping.
> > string termconditions = @"$('#" + pnlMemberAgreement.ClientID +
> > "').modal({ closeHTML: ''});";
> > I also tried <a href="#">Close</a> instead of just '' - but either its
> > making no difference or I can't figure out what quotations to use
> > within my c# string.
>
> > .simplemodal-container a.modalCloseImg {
> > background:url(../App_Themes/Images/Ecommerce/x.png) no-repeat;
> > width:25px;
> > height:29px;
> > display:inline;
> > z-index:3200;
> > position:absolute;
> > top:-14px;
> > right:-18px;
> > cursor:pointer;
>
> > }
>
> > 2. Whilst the div is made visible, it sits under my content - its not
> > being overlayed over the top, nor does it have a background colour
> > going on. I grabbed from the sample site:
> > .simplemodal-overlay {
> > background-color:#000;
> > cursor:wait;
>
> > }
>
> > .simplemodal-container {
> > height:400px;
> > width:600px;
> > background-color:#fff;
> > border:3px solid #ccc;
>
> > }
>
> > Is this an additional option I need to set?
>
> > 3. The div is not acting like a modal object - I can still click
> > other buttons and stuff on the same page and leave the page!
>
> > 4. I'm confused with the styling.
> > what do I need to put on my div so that the right styles get applied
> > to it - or should I be doing this in options? ie. I have my t&c
> > inside a panel, and I tried putting a css class on that for the
> > container part, but where do I put the overlay - or should I not have
> > to do this.
>
> > It sort of looks like the basic modal example does what I want it to
> > do.. but I can't figure out what I have missed in my implementation of
> > it :(
>
> > I pretty much have this in my c#
> > string termconditions = @"$('#" + pnlMemberAgreement.ClientID +
> > "').modal();";
>
> > and want to apply some basic stylings so that the frontend guy can
> > take over but it will do what its supposed to
>
> > Thanks for any assistance!
