I am showing a simple <input type="text" />
in a ModalPopupExtender which is shown in top of a ColorBox. It shows fine, but the user can't write in it. Can anyone tell what's wrong?
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#testbutton').click(function () {
$.colorbox({ inline: true, width: "50%", open: true, href: "#messageform",
onClosed: function () {
$('#messageform').hide();
},
onOpen: function () {
$('#messageform').show();
}
});
});
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<input id="testbutton" type="button" value="click" />
<div id="messageform" style="display: none;">
<asp:Button ID="open" runat="server" />
</div>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DropShadow="true" PopupControlID="Panel1" TargetControlID="open">
</ajaxToolkit:ModalPopupExtender>
<div id="Panel1">
<input type="text" name="foo" value="" /> <--- **This shows, but can't enter text**
</div>
</asp:Content>
I wrote to the author of Colorbox, and he tracked the issue down to the following lines:
if (document.addEventListener) {
document.addEventListener('focus', //trapFocus, true);
$events.one(event_closed, function (){
document.removeEventListener('focus', trapFocus, true);
;}
I outcommented those, and now it seems to work (don't know about older IE versions and other problems though).