Hiding a DropDownList Behind a JQuery UI Dialog
The phrase “teaching an old dog new tricks” comes to mind as I start this entry. Nearly two years ago I wrote about how to hide a DropDownList box behind another layer. The reason why this is important is a DropDownList is rendered as a system control and not a visual element that originates in the browser. This causes issues when rendering layers over a DropDownList because the DropDownList shows through the higher layer.
I think this issue has been resolved in the newer browsers, but there is still a proliferation of Internet Explorer 6.0. This week I was testing one of my newer sites in IE 6 and found this issue popped up with a JQuery UI Dialog. So I thought I would solve the issue with a slightly more modern, JQuery way.
The JQuery UI dialog has two events you need to define functions, open and beforeclose. These events execute when the dialog opens and just before it is closed, as their names imply. In the settings for the dialog the functions can be defined. Really all that needs to be done is hiding and showing the select elements in the markup. This is very easy to do, just define a selector to get all the selector elements that could possible be behind the dialog. Using the example from the Confirmation Dialog post the selector could be as simple as ‘#ContactForm select’.
$("#IAgree").dialog({
bgiframe: true,
resizable: true,
height: 640,
width: 640,
modal: true,
open: function(event, ui) { $('#ContactForm select').hide(); },
beforeclose: function(event, ui) { $('#ContactForm select').show(); },
closeOnEscape: false,
overlay: {
backgroundColor: '#000',
opacity: 0.65
},
buttons: {
'I Agree': function() {
$(this).dialog('close');
}
, 'Cancel': function() { window.location = 'privacy.aspx'; }
}
});
Now when the dialog opens and closes any select statement is hidden and redisplayed in response to the dialog. Thus solving our problem.