How to Hide the DropDownList Behind Layer
A very common problem for modern web interface developers is displaying layers over a DropDownListBox. The DropDownListBox always wants to be displayed on top of any other control or layer in the page. This is because the DropDownListBox is actually a system control and not something controlled by the browser.
Recently I came into a situation where I needed to display a layer as a Model dialog on top of my web page. The dialog layer would not hide a DropDownListBox that happened to be position directly behind it.
Hiding the DropDownListBox
<div id="'dlWrapperLayer'"> <asp:DropDownList ID="ddlMyList" runat="server"> </asp:DropDownList></div>
Registering the Startup script is done in the code behind. If Me.ClientScript.IsStartupScriptRegistered("ShowModalDialog") = False Then Dim sb As New StringBuilder
sb.Append("document.all['ModalDialogLayer'].style.visibility = 'visible';document.all['PopUpBackGround'].style.height = 1500;document.all['PopUpBackGround'].style.width = window.screen.availWidth;document.all['PopUpBackGround'].style.visibility = 'visible';document.all['dlWrapperLayer'].style.visibility = 'hidden';") Me.ClientScript.RegisterStartupScript(GetType(printcopyfax), "ShowModalDialog", sb.ToString, True) End If
I will try to remember to write an entry on doing a modal dialog soon, so don't worry.
Redisplay the DropDownListBox
I have a button on my dialog layer to close it, or essentially hide it from view. I leverage the onclick event handler to redisplay the drowdownlistbox. <input id="cbDontShow" value="I Acknowledge" type="button" accesskey="S" title="Ackowledge Message." runat="server" onclick="document.all['ModalDialogLayer'].style.visibility = 'hidden';document.all['dlWrapperLayer'].style.visibility = 'visible';document.all['PopUpBackGround'].style.visibility = 'hidden';" /></td>
Hopefully this will prove to be useful for you in the future.