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]
<mailto:[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]>
> <mailto:[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]>
> <mailto:[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]>
<mailto:[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] <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.
