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.
