I'm using a modal popup extender on a page, and in IE6, it causes any <select> controls on the page to disappear when the popup is removed. I've tried hiding the <select> controls myself before showing the popup, then bringing them back afterwards, but haven't had any luck. Has anyone run into this issue previously?
Thanks!
Jonas
Code sample:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PopupTest.aspx.cs" Inherits="MySandbox.Web.PopupTest" %>
<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Popup Test</title>
<style type="text/css">
body
{
font-family: Verdana;
font-size: small
}
.pageBG
{
background-color:gray;
filter:alpha(opacity=70);
opacity:0.75;
}
#modalPopup
{
border: solid 1px black;
background-color: #ffffff;
width: 650px;
height: 340px;
padding: 4px
}
</style>
<script type="text/javascript" language="javascript">
var _popup;
function showPopup()
{
if (!_popup)
{
_popup = new AjaxControlToolkit.ModalPopupBehavior($get('modalPopup'));
_popup.set_PopupControlID('modalPopup');
_popup.set_BackgroundCssClass('pageBG');
_popup.initialize();
}
$get('sel').style.display = "none";
_popup.show();
}
function hidePopupComplete()
{
_popup.hide();
$get("sel").style.display = "";
}
function hidePopup()
{
setTimeout('hidePopupComplete();', 100);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager id="scriptManager" runat="server" />
<div>
<div>
Hello!
<input type="button" value="Show Popup" onclick="showPopup();" />
<select id="sel">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<div id="modalPopup" style="display:none">
<div>
Popup!
</div>
<div style="position: absolute; bottom: 5px;">
<input type="button" value="Cancel" onclick="hidePopup();" />
</div>
</div>
</div>
<div style="display: none">
<ajaxtoolkit:modalpopupextender id="bootstrapMpe" runat="server" targetcontrolid="bootstrapPopup" popupcontrolid="bootstrapPopup" />
<div id="bootstrapPopupContainer" style="display:none">
<div id="bootstrapPopup" runat="server"></div>
</div>
</div>
</form>
</body>
</html>