PDA

View Full Version : modal panel not really modal



gooopil
15 Oct 2006, 12:05 PM
Hi everyone,

I'm having some trouble with my modal Panel created as follows:

YAHOO.options.panel = new YAHOO.widget.Panel("options", { width:"30em", height:"30em", zIndex:10001, fixedcenter: true, constraintoviewport: true, underlay:"shadow", close:true, visible:false, draggable:false, modal:true } );

The panel show up, but only the empty parts of the window are covered by the modal layer (ie I can still click elements). What could be the cause ?


Thanks in advance :)

edit : Just thought about that : my page is made up of elements positioned with absolute coords, might it be the reason ?

jack.slocum
15 Oct 2006, 12:22 PM
I made these two changes to container.css:


.mask {
z-index:10000;
}

.panel {
z-index:10001;
}


The problem is the mask is z-index:0 or 1 and passing a z-index to the dialog doesn't change the mask z-index. I set them both to a ridiculous z-index in one shot in the css file and never worry about it again. :)

gooopil
15 Oct 2006, 12:28 PM
Unfortunately it doesn't do the job for me :(
I couldn't find a mask class in the css so I created it my self to change the z-index, without any success...

jack.slocum
15 Oct 2006, 12:47 PM
.mask is the 7th selector in container.css.

gooopil
15 Oct 2006, 12:58 PM
I actually found it on my own (Aptana wasn't showing it in the outline for whatever reason) but anyway, it does not change anything...
I'll try to change these absolute positioned elements tommorow, and i'll see if that's not the cause. I don't know I have the feeling only the parts not covered by one of these elements are affected by the mask, but for now, time to sleep :)

Thanks for your help

jack.slocum
15 Oct 2006, 1:01 PM
The other thing is making sure your panel is rendered into the body element and not a child element.

gooopil
15 Oct 2006, 1:13 PM
That's how I've organised the code :

<body>
<div>Some content</div>
</div id="thepanel>the panel</div
</body>

Seems ok to me :/

jack.slocum
15 Oct 2006, 3:18 PM
Can you put up a link? I'd be happy to take a look at it.

gooopil
16 Oct 2006, 1:30 AM
I'll put that up on a live server as soon as possible, thanks for the offer :)

gooopil
16 Oct 2006, 2:32 AM
http://www.ecocitoyen-inprogress.info/agir.php?piece=Chambree

Click on the "objet" button, you'll see the panel :)

jack.slocum
16 Oct 2006, 3:01 AM
2 things:

You have no body tag. I doubt this is causing your problem but you probably want to add one. :)

When I look at your container.css I see:



.mask {
z-index:0;
display:none;
position:absolute;
top:0;
left:0;
-moz-opacity: 0.5;
opacity:.50;
filter: alpha(opacity=50);
background-color:#CCC;
}

gooopil
16 Oct 2006, 5:32 AM
Oh my ! I got it now...Your first advice was the right one, except I was not modifying the right container.css :oops:
That's amazing how much time I spent without even realizing that :?

Well thanks for your great help, you're doing an awesome job here :)

jack.slocum
16 Oct 2006, 8:36 AM
Thanks. A link always makes it so much easier to track down!