Search code examples
jqueryhtmlasp.netmodalpopupextender

Input fields not working


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>

Solution

  • 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).