2013-05-16 3 views
3

ColorBox의 상단에 표시된 ModalPopupExtender에 간단한 <input type="text" />을 표시했습니다. 그것은 잘 보여,하지만 사용자가 쓸 수 없습니다. 아무도 잘못 말할 수 있습니까?입력 필드가 작동하지 않습니다.

<%@ 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> 
+0

텍스트 상자를 클릭 할 수 있습니까? 아니면 요소를 검사하면 텍스트 상자로 이동합니까? 아니면 겹치는 부분입니까? – Pete

+0

그것은 오른쪽 커서를 보여 주지만, 클릭하면 "깜박이는 커서"가 보이지 않습니다. 나는 그 요소를 확인했는데, 그 앞에 뭔가있는 것 같지 않습니다. 최신 버전의 Colorbox를 다운로드하면 코드를 테스트 할 수 있습니다. – perene

+0

마지막 태그에서 입력 태그의 읽기 전용 속성은 무엇입니까?

답변

2

내가 Colorbox의 저자로 쓰고, 그 다음 줄에 아래로 문제를 추적 :

if (document.addEventListener) { 
    document.addEventListener('focus', //trapFocus, true); 
       $events.one(event_closed, function(){ 
       document.removeEventListener('focus', trapFocus, true); 
       ;} 

나는 사람들을 outcommented, 그리고 지금은 작동하는 것 같다 (오래된 IE 버전에 대해 알고하지 않으며, 다른 문제들).

+1

최신 버전의 colorbox를 사용하면 trapFocus : false 설정을 사용하여 해당 코드 섹션을 비활성화 할 수 있습니다. 이것은 일반적으로 js의 사용자 지정 버전을 만드는 것보다 나은 솔루션입니다. – fuz

+0

답장을 보내 주셔서 감사합니다 .--) – perene

+0

trapFocus : 트릭을 수행합니까? –

1

name 속성은 misssing입니다. 어쩌면 당신은 빈 값을 주려고 할 수 있습니다.

<input type="text" name="foo" value="" /> 

onclosed 및 onOpen do 무엇입니까? 당신의 CSS는 어떻게 생겼습니까? 또는 입력 위에있는 팝업 레이어 (또는 오버레이)입니까? Z- 색인을 확인하십시오.

+0

이름과 값을 추가했지만 여전히 편집 할 수 없습니다. 이 예제에서는 CSS가 없으므로 테스트를 쉽게 작성했습니다. Z- 색인은 정상입니다. 드롭 다운으로 입력을 변경하면 Chrome에서 작동하지만 IE 및 Firefox에서는 문제가 있는지 확인하는 데 도움이됩니다. – perene

관련 문제