PDA

View Full Version : Modal panel behind mask in yui-ext layout



Tym
3 Jan 2007, 3:40 AM
I've put an example Jack's Cross-browser Web 2.0 Layouts into practise in the redesign of a sales tool app, as you can see at the test page at http://harvester.intulogica.com/Test.asp.

However, I am seeing a strange problem with the Yahoo panel code when I am using a Modal panel.

I've taken the sample code from thttp://www.wait-till-i.com/index.php?p=333. As you'll see when you go to the Test.asp page, the first panel works fine, but when you click the second link, the grey modal mask covers everything - including the panel.

No matter how I change the z-index in the CSS or the zIndex panel attribute - the remains the case. When I use the sample code in a non-layout page, the modal panel works fine. Does anyone know if the Dialog class resolves this problem or someone perhaps suggest some other resolution?

Thanks
Tym

jack.slocum
3 Jan 2007, 7:30 AM
The best solution is to scrap the yui panel and use the yui-ext equivalent (much nicer anyway).

If you must use the yui panel, then make sure it rendered to the body and you set a zIndex in the range of 15000. :)

Tym
3 Jan 2007, 1:29 PM
Thanks Jack,
Setting the attributes and render call to

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);

Fixed the problem with the yahoo panel.

I'll check out your yui-ext dialog as well.

Tym

amitgh
29 Oct 2008, 2:29 AM
Thanks Jack ur replies are cool. I started with yui but now use more of ext-js libraries. Thanks to ur help in this post. Keep u the good work. Thank u.

amitgh
21 Nov 2008, 7:11 AM
Hi,
I am facing a problem that at each click to complete button my doalig moves up. This is my code.
Plz help ........:(


//var flagForSave = 0; //This variable is used as indication whether any report is been saved as complete
//var flagToKnowIfNewSaveAgain = "no";


YAHOO.namespace("example.container");


function init() {

// Define various event handlers for Dialog

var handleYes = function() {
var choice="draft";
savereport(choice,flagToKnowIfNewSaveAgain);
if(flagForSave == 1){// This is again if the cycle of save happens after complete

YAHOO.example.container.simpledialog1.setBody("Please select your Choice !");
flagToKnowIfNewSaveAgain = "no";
flagForSave = 0;
}
this.hide();
};
var handleNo = function() {
YAHOO.example.container.simpledialog1.setBody("This report will be stored as a new Report.Please Enter your choice?");
var choice="final";
savereport(choice,flagToKnowIfNewSaveAgain);
if(flagForSave == 0){
flagForSave = 1;// Means report is saved as complete once
flagToKnowIfNewSaveAgain = "yes";
}
this.hide();
};

var cancel1 = function(){
this.hide();
};

// Instantiate the Dialog
YAHOO.example.container.simpledialog1 = new YAHOO.widget.SimpleDialog("simpledialog1",
{ width: "300px",
fixedcenter: true,
visible: false,
draggable: false,
zIndex: 15000,
modal: true,
close: true,
text: "Please select your Choice !",
icon: YAHOO.widget.SimpleDialog.ICON_HELP,
constraintoviewport: true,
buttons: [ { text:"As Draft", handler:handleYes, isDefault:false },
{ text:"Complete", handler:handleNo },
{ text:"Cancel", handler:cancel1} ]
} );
YAHOO.example.container.simpledialog1.setHeader("How would you like to save the Report?");


// Render the Dialog
YAHOO.example.container.simpledialog1.render(document.body);

YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.simpledialog1.show, YAHOO.example.container.simpledialog1, true);
//YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.simpledialog1.hide, YAHOO.example.container.simpledialog1, true);


}


YAHOO.util.Event.addListener(window, "load", init);