Sunday, March 11, 2012

Are nested modal dialogs possible?

Yep...I am using multiple modalpopups and they sort of work! Check out this post for more info:http://forums.asp.net/thread/1529784.aspx

Jason


Thanks for the response, but z-index is not the issue. One of the issues (among several) is that when you pop a modal dialog from a modal dialog you can still interact with the first one.

Thanks ... Ed


That's what I meant when I said they sort of work!! Being able to interact with the underlying modal is in fact a z-index problem. The modal creates a background div to prevent interaction with the underlying controls and the z-index of that div is fixed at 10000. The actual modalpopup is then given a z-index of +1. Subsequent modals then create a background div of 10000 which sits below the already visible modal.

I am going to have a little play with the behavior JS to see if I can figure out a temp fix.

Jason


OK...I tested this out and it seems to work.

I added the following function definition to the modalpopupbehavior.js just before the dispose function:

getBackgroundElementZIndex : function() {
/// <summary>
/// Get the z-index for the background div.
/// </summary>

var nodeQueue = [];
var childNodes = document.childNodes;
var maxZIndex = 0;
for (var i = 0; i < childNodes.length; i++) {
var node = childNodes[i];
if (node.nodeType == 1) {
nodeQueue[nodeQueue.length] = node;
}
}

while (nodeQueue.length) {
node = nodeQueue.shift();
var nodeZIndex = CommonToolkitScripts.getCurrentStyle(node, 'zIndex', node.style.zIndex);
if (nodeZIndex > maxZIndex) {
maxZIndex = nodeZIndex;
}
childNodes = node.childNodes;
for (i = 0; i < childNodes.length; i++) {
node = childNodes[i];
if (node.nodeType == 1) {
nodeQueue[nodeQueue.length] = node;
}
}
}

return maxZIndex + 1;
},

I then changed the following line of code in the intialise function:

this._backgroundElement.style.zIndex = 10000;

to

this._backgroundElement.style.zIndex = this.getBackgroundElementZIndex();

So, this seems to work OK and subsequent modals create a background div that encompases the previous modals and thereby prevents user interaction.

Cheers,

Jason


Slight amendment to get it to work with Firefox:

 getBackgroundElementZIndex : function() { /// <summary> /// Get the z-index for the background div. /// </summary> var nodeQueue = []; var childNodes = document.childNodes; var maxZIndex = 10000; for (var i = 0; i < childNodes.length; i++) { var node = childNodes[i]; if (node.nodeType == 1) { nodeQueue[nodeQueue.length] = node; } } while (nodeQueue.length) { node = nodeQueue.shift(); var nodeZIndex = CommonToolkitScripts.getCurrentStyle(node, 'zIndex', node.style.zIndex); if (nodeZIndex != 'auto' && nodeZIndex > maxZIndex) { maxZIndex = parseInt(nodeZIndex); } childNodes = node.childNodes; for (i = 0; i < childNodes.length; i++) { node = childNodes[i]; if (node.nodeType == 1) { nodeQueue[nodeQueue.length] = node; } } } return maxZIndex + 1; },

No comments:

Post a Comment