Ok, so I've been working on something like a YUI modal dialog.
The basic test consists of 2 divs, each appended to the <body>
The first one is a 'protective' area, which catches all clicks to the
underlying elements. Basically just a client-sized div, white with
50% opacity. This div is positioned absolute with a high z-index(1000)
The second div is the actual dialog box. Positioned absolute with a z-
index of (1001).
I have functions to show and hide the dialog. If the dialog doesn't
exist yet, I create it (and the protective layer) before I first show
it. So far so good.
If my hide/show methods just switch between display 'block' and
'none' everything works hunky dory. The page goes semi translucent
with a full opacity dialog right where I want it.
Next I wanted to introduce animation and make the dialog 'slide down'
like on OS X. Visual, conveniently provides a method for that. Cool.
However when I use slide down on the dialog box, it ends up 'behind'
the protective layer. Almost like Visual is changing the layer. The
only place where that doesn't happen is Safari. Both IE and FF (mac
and win) get 'wrong'.
So what does Visual do? Does it actually change zIndex?
And a 2nd related question. I want the sequence to be 'show
protective layer -> slide down' and 'slide-up<- hide protective
layer' . I implemented this using the 'afterFinish' property.
However, there's a visual glitch the first time I make the whole
thing visible. The dialog has a height of 150px when I first build
it. So the first time, it's not in the 'up' position, causing an
undesirable blip on the first appearance.
I tried to run a slideUp with duration:0 and transition:none to slide
it up as quick as possible before returning from the creation
routine. But there still is a little blip visible on the first
animation. What's the right method to get something in blindup position?
Here's the current flow for showing the dialog:
var view = {
confirm_dialog: null,
showConfirm: function ( callback ) {
if (!view.confirm_dialog) {
view.confirm_dialog= new modalDialog(callback);
}
view.confirm_dialog.show(); // <-- comes up too soon - how to
delay?
},
hideConfirm: function () {
if (view.confirm_dialog) {
view.confirm_dialog.hide();
}
}
}
Thanks,
Juergen
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/mochikit
-~----------~----~----~----~------~----~------~--~---
