ModalPopup and display over dropdownlists

Hi All,

I've ran into a problem with modalpopup control, if I have dropdownlists on the page, and they're behind the modalpopup, then don't get disactivated.

I tried to play with z-index, but no succes.

Can anyone help me on this?

Thank you,

Mike

I ran into this same problem on Friday and have been working on it over the weekend with no success. Not only do the dropdownlists not get disactivated they will be displayed "over" the modal popup.

See: http://forums.asp.net/thread/1278621.aspx

We're working on a FAQ and we'll add this.

Hi,

is there anyway I can modify ModalPopupBehavior.js with this hack:

if (document.all)
{
divNode.insertAdjacentHTML("afterEnd", '<IFRAME style="position: absolute;z-index:4;" src="http://pics.10026.com/?src=javascript:false;" frameBorder="0" scrolling="no" id="' + sTableID + '_hvrShm" />');
var iframeShim = document.getElementById(sTableID + "_hvrShm");
iframeShim.style.top = hoverDiv.style.top;
iframeShim.style.left = iframeShim.style.left
iframeShim.style.width = hoverDiv.offsetWidth;
iframeShim.style.height = hoverDiv.offsetHeight;
}

So this iframe will appear between background and the modalpupu and would cover the window objects such as dropdownlists?

Please help, I need to get a solution for this.

Thank you,

Mike

sburke.

So you are saying that because ddl, listboxes etc are windows controls will always appear above modal, drag overlays etc.

I have this problem in IE7, but i think its fine in IE6, i havent looked for a while, i gave up on the problem.

Thanks
Steve

There must be a way to position transparent iframe over the whole page between the "page" and "modal" div.

Any thoughts?

I have come up with a "semi" solution. What I do is hide the dropdowns when displaying the popup and then show them when the popup is closed.

To do so, you will first need to add the following code to the _show function:

// Because of the way how IE draws DropDowns, we need to hide them so// they do not display over the popupvar selects = document.getElementsByTagName('select');for (i = 0; i < selects.length; i++) { selects[i].style.visibility = 'hidden';}

Then, add the following code to the _hide function:

// We need to redisplay the hidden DropDownsvar selects = document.getElementsByTagName('select');for (i = 0; i < selects.length; i++) { selects[i].style.visibility = 'visible';}

Thanks,
Chad

Thanks Chad for this,

good for now.

Regards,
Mike

I just implemented your solution Chad, it works great. But I ran into one problem, but I think it can be fixed.

I need to excerpt the dropdownlists that are actually contained withing the modalpopup.

I am not sure how to do this trick in javascript.
In the loop I need to do somecheck like if(selects[i].IsWithin($(_PopupControlID) ).

var selects = document.getElementsByTagName('select');
for (i = 0; i < selects.length; i++) {
selects[i].style.visibility = 'hidden';
}

Any help on this?

Much appreciate your help!!

Mike

I realized the problem with my solution as soon as I hit the Post button. But, then I had to leave town and I'm just now able to get back to the problem.

I think you could do something very similar to what you are trying. If I remember right, an element has a parent attribute. So, if you added a check for the parent of the dropdown, that should work. Let it be know you would have to hard code the DIV name in both your HTML and in the embedded JavaScript.

But, my problem is even deeper. I have different modal popups based upon action selected. To add salt to the wound, I need to display another modal on top of the modal already open (which sounds worse than it is).

So, what I have done is to add a hidden field named hidModalLevel and is set to an initial setting of 0. Everytime a modal is displayed on the page, the value is incremented by one. When the modal is closed, the value decremented by one.

Next, I have added a prefix to the dropdowns in the modals to identify them. The prefix is ddlModalx where x equals the level the modal would be displayed. In other words, dropdowns in the first level modal popups would be suffixed with ddlModal1, those in the second level would be suffixed with ddlModal2, and so forth.

Now change the code I supplied earlier for the _show function to:

// Because of the way how IE draws DropDowns, we need to hide them so// they do not display over the popupvar selects = document.getElementsByTagName('select');var modalLevel = document.getElementById('ctl00_ContentPlaceHolder_hidModalLevel')modalLevel.value =+ 1;var substringSearch = 'ctl00_ContentPlaceHolder_ddlModal' + modalLevel.value;for (i = 0; i < selects.length; i++) { if (selects[i].id.substring(0,34) != substringSearch) { selects[i].style.visibility = 'hidden'; }}

Then, replace the code I supplied eialier for the _hide function with:

// We need to redisplay the hidden DropDownsvar selects = document.getElementsByTagName('select');var modalLevel = document.getElementById('ctl00_ContentPlaceHolder_hidModalLevel')modalLevel.value = modalLevel.value - 1;for (i = 0; i < selects.length; i++) { selects[i].style.visibility = 'visible';}

I realize this might not have been the best description of what I have done and I hope to write up a web page with an example to describe this better. Its not the most elegant solution, but it does the job.

Thanks,
Chad