I also got put off jqModal initially, mainly because the TB styling was very
nice but jqModal you have to put the effort in to get looking right.
I created my own wrapper function around jqModal:
/* Creates a jqModal window and appends it to the body.
* @param idPrefix The prefix to attach to elements' IDs. The window div will
have _jqmWindow appended to the prefix, the close button will have
_jqmClose, and the title span will have _jqmTitle appended. These IDs may be
used to alter behaviours, styles and content as required.
* @param content The window's HTML content.
* @param jqmOptions The options to pass to $.jqm() when setting the div up
as a jqModal window.
*/
function CreateJQModalWindow(idPrefix, jqmOptions, content)
{
$( "<div id='"+idPrefix+"_jqmWindow' class='jqmWindow'>" +
"<div style='height:100%'>" +
"<div class='jqmTitle'>" +
"<a id='"+idPrefix+"_jqmClose' href='#'
class='jqmClose'></a>" +
"<span id='"+idPrefix+"_jqmTitle'></span>" +
"</div>" +
"<div class='jqmBody'>"+content+"</div>" +
"</div>" +
"</div>")
.jqm(jqmOptions)
.appendTo("body");
$("#"+idPrefix+"_jqmClose")
.hover(function() {$(this).addClass("jqmCloseInverse");}, function()
{$(this).removeClass("jqmCloseInverse");})
.click(function() {$("#"+idPrefix+"_jqmWindow").jqmHide()});
}
I then use that like this:
CreateJQModalWindow('window1', {closeClass:false, trigger:false,
modal:true},
"<div>The HTML content of my window</div>");
I created the prefix option so that I can have multiple windows existing on
a page (although only one would be visible - it just saves on recreating
them ecah time). The window can be shown and hidden with:
$("#window1_jqmWindow").jqmShow();
And to top all of that off, this is my CSS:
div.jqmWindow {position:absolute; top:50%; height:200px; margin-top:-100px;
left:50%; width:300px; margin-left:-150px; background:url(/images/jqmodal-
bg.gif) repeat; border:2px solid darkblue}
/* Background iframe styling for IE6. Prevents ActiveX bleed-through
(<select> form elements, etc.) */
* iframe.jqm {position:absolute; top:0; left:0; z-index:-1; width:
expression(this.parentNode.offsetWidth + 'px'); height: expression(
this.parentNode.offsetHeight + 'px')}
.jqmTitle {margin:0; padding:0 3px; font-family:Arial,sans-serif;
font-size:12px; font-weight:bold; border-bottom:thin solid #aaa;
line-height:21px; color:#3341bf; background:#e8eaff}
.jqmBody {padding:4px}
.jqmBody * {margin:2px}
.jqmClose {float:right; height:16px; width:16px; margin-top:3px;
background:url('/images/syncwatch-close.gif')}
.jqmCloseInverse {background:url('/images/syncwatch-close-inverse.gif')}
.jqmOverlay {background-color:#e8eaff}
My jqmodal-bg.gif is just a faint background patterning. The two close
buttons for normal and hover (inverse) are 16x16 images.
I hope all of that helps! There can be quite a bit more work to use and
style jqModal, but it is designed to be played with where TB is designed to
be ready to go and used as-is.
rob
On 4/18/07, Christopher Jordan <[EMAIL PROTECTED]> wrote:
Rob,
While I was looking into this, I did spend quite a while at the jQModal
site
looking at it. I can't off-hand remember why I didn't choose it. Maybe you
could
share with me a few code snippets showing what you've done with jQModal.
I'm
interested, as I've started hacking up the thickBox code and css to
achieve some
styalistic aims.
Thanks,
Chris
Rob Desbois wrote:
> No problem.
> Also, fwiw I ended up migrating to jqModal instead of thickbox.
> My reasoning was that despite TB being a very good plugin, it's not that
> customisable without hacking up the code. Whilst I achieved what I
> wanted through hacking the plugin, I realised that jqModal was designed
> to be a customisable window plugin, whereas TB is supposed to be far
> closer to Lightbox and is not so easily manipulated in terms of
> behaviour and content as jqModal.
>
> Just my feeling on it, and as I said it is a very good plugin, but it's
> worth thinking early on about which one is more suitable for your
situation.
> Have fun with it!
>
> rob.
>
> On 4/18/07, *Chris Jordan* <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
>
>
> Rob,
>
> That is essentially what I ended up doing. I got busy with the
coding
> so I didn't have time to update this thread, but that is exactly
what
> I ended up doing.
>
> Thanks for the help though! :o)
>
> Cheers,
> Chris
>
> On Apr 18, 3:51 am, Klaus Hartl <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
> > Chris Jordan schrieb:
> >
> >
> >
> > > Hi folks,
> >
> > > I've searched the archives, but didn't find what I was looking
> for. So
> > > if this has already been discussed and someone can point me to
> the old
> > > thread, that'd be awesome. Otherwise:
> >
> > > Is it possible to trigger the opening of a thickbox without a
> link? In
> > > other words, I want to do this:
> > > <script>
> > > if(true){
> >
> > > open.thickbox.somehow (url, width, height, etc, etc, etc)
> >
> > > }
> > > </script>
> >
> > > Thanks,
> > > Chris
> >
> > You could hijack a link with trigger for that... If the link has
> been
> > thickboxed:
> >
> > $('#trigger-thickbox').trigger('click');
> >
> > Don't know if that helps.
> >
> > -- Klaus
>
>
>
>
> --
> Rob Desbois
> Eml: [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>
> Tel: 01452 760631
> Mob: 07946 705987
> "There's a whale there's a whale there's a whale fish" he cried, and the
> whale was in full view.
> ...Then ooh welcome. Ahhh. Ooh mug welcome.
--
http://www.cjordan.us
--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.
