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 <emarti...@gmail.com> 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 <polarw...@gmail.com> 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!

Reply via email to