PDA

View Full Version : Problem occurred while using dialog in layout complex layout



davy_wei
3 Jan 2007, 9:04 AM
Hi, I am trying to use a dialog modal in YUI-ext complex layout(which contains header, left collapsed menu, center content area, and footer. I modify the example code of HelloWorld dialog and put it in the content area.

The dialog is set as:
dialog = new YAHOO.ext.BasicDialog("hello-dlg", {
//modal:true,
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});

When the dialog modal pops up, the shadow area is always on the top and blocks me to do anything in the popup window. It looks like the z-index of shadow is greater than the z-index of the dialog modal.

After I change the shadow to false, I met another problem. The dialog windows pops up ok, but when I moving the dialog to the header and footer areas, the header, and footer are always on the top and blocks the dialog modal partially.

I check all the examples on the site, but didn't find any ones that use dialog modals in the complex layout. Anyone ever met the problem like this? Please help me to solve it if you know how. I appreciate it.

vtswingkid
3 Jan 2007, 12:32 PM
I am seeing the same problem. Am trying to use a modal dialog inside the center panel of border layout. I'll have to sneak a peak at the documentation content window. Seems to work there fine. What is the secret?

... I looked at the documentation...
He uses an iframe when loading his dialog examples that use a modal screen.
It only affects the iframe. May have to do something similar.

Tym
3 Jan 2007, 1:31 PM
Funny, I just posted this problem as well. The response I got from Jack helped to fix it. You need to set the zindex above 15000 and make sure the panel renders in the document body, as seen below:

panel_one = new YAHOO.widget.Panel("panel_one",
{
close:true,
visible:false,
draggable:true,
constraintoviewport:true,
fixedcenter:true,
effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.5},
zIndex:15000
}
);
panel_one.render(document.body);

vtswingkid
3 Jan 2007, 6:27 PM
I am using borderlayout and am trying to open a modal dialog in the center panel.
This is not the YUI panel. So I cannot control that it opens in the body. Is there a solution for this. Do I create an iframe using the createShim function?

davy_wei
3 Jan 2007, 6:33 PM
I am not using YUI panel. I use YUI-ext dialog.

http://www.yr-tech.com:8023/home.php

You will see the problem when you click the "Show Dialog" button.

I changed "modal:false" to "modal:true", the dialog box is still under the shadow.

http://www.yr-tech.com:8023/test1.html

Animal
4 Jan 2007, 1:05 AM
The dialog should be in document.body.

vtswingkid
4 Jan 2007, 6:23 AM
So I assume yui-ext modal dialogs were only intended to be loaded into the body? Hence the mask blocks the entire screen. I suppose we need to use the up and coming element.mask if we want to instead disable one of the panels under the dialog instead of the entire screen? If I am wrong about that please let me know. Otherwise I am going to start playing with this element.mask function.

davy_wei
4 Jan 2007, 6:41 AM
I did that. I moved the dialog <div> out of the panel. It is still not showing properly.

See http://www.yr-tech.com:8023/test2.html

This is the code

<div id="inner2" class="ylayout-inactive-content">
<input type="button" id="show-dialog-btn" value="Show Dialog" />




Note that the js is not minified so it is readable. See layout.js for the full source code.</p>

</div>



<div id="hello-dlg" style="visibility:hidden;">
<div class="ydlg-hd">Layout Dialog</div>
<div class="ydlg-bd">
<div id="west" class="ylayout-inactive-content">
West
</div>
<div id="center" class="ylayout-inactive-content">


<input type="button" id="theme-btn" value="Toggle Theme" />
</div>

</div>
</div>


<div id="footer" class="ylayout-inactive-content">
<span id="footname">footer</span>
</div>


Now the dialog <div> is in the document.body dom tree. The problem might be in the BorderyLayout, because when init the doc, the header, footer, menu and content are added into the north, south, west and center area. There are no action in Layout init for the dialog modal. What do you think?

Animal
4 Jan 2007, 7:15 AM
Use Firebug to check your doc structure.

You are not closing your "header" div, and the dialog is ending up in that



<div id="header" class="ylayout-inactive-content">
<div id="slogan" style="padding-top:3px;"><div>header</div>
</div>
<div id="classes" class="ylayout-inactive-content">


See the problem?

davy_wei
4 Jan 2007, 7:29 AM
Thanks man!!!!!
It's fixed. Your help is so big. I appreciate it and Happy New Year!


Use Firebug to check your doc structure.

You are not closing your "header" div, and the dialog is ending up in that



<div id="header" class="ylayout-inactive-content">
<div id="slogan" style="padding-top:3px;"><div>header</div>
</div>
<div id="classes" class="ylayout-inactive-content">


See the problem?