팝업 라이트 박스에 텍스트 필드를 입력 할 수 없습니다.

Question

jQuery에서 텍스트 입력 필드를 가져 오는 라이트 박스를 만들었습니다. 그러나 어떤 이유로 입력 필드에 입력 할 수 없으므로 자동으로 선택이 취소됩니다. 마우스 버튼을 누른 상태에서 타이핑을 시작하면 작동하지만, 나가자 마자 모든 텍스트가 삭제됩니다. 왜 이런 일이 일어날 지 모릅니다. 여기

는 (죄송합니다, 나는 그에게 많은 것을 알고 있지만, 라이트는 jsfiddle에 표시되지 않음) 내 코드의

HTML

<div id="submitanswerbutton"> 
<a href="#answer-box" class="login-window"><div class="btn btn-primary">Ask a Question</a></div> 
<div id="answer-box" class="answer-popup"> 

</div> 
</div>​ 

CSS

#submittextbutton{ 
float:right; 
margin-top:5px; 
margin-right:12px; 
} 

#mask { 
display: none; 
background: #000; 
position: fixed; left: 0; top: 0; 
z-index: 10; 
width: 100%; height: 100%; 
opacity: 0.5; 
z-index: 999; 
} 

.answer-popup{ 
display:none; 
font-size:14px; 
background: #333; 
padding: 10px;  
width:250px; 
height:300px; 
border: 1px solid black; 
float: left; 
font-size: 1.2em; 
position: fixed; 
top: 50%; left: 50%; 
z-index: 99999; 
box-shadow: 0px 0px 20px #333333; /* CSS3 */ 
    -moz-box-shadow: 0px 0px 20px #333333; /* Firefox */ 
    -webkit-box-shadow: 0px 0px 20px #333333; /* Safari, Chrome */ 
border-radius:13px 13px 13px 13px; 
    -moz-border-radius: 13px; /* Firefox */ 
    -webkit-border-radius: 13px; /* Safari, Chrome */ 
} 

.answer-popup a { 
color:white; 
font-size:14px; 
text-decoration:none; 
background:#333; 
}  

JS

// Clicking on Ask a Question button on Answers page 
$(document).ready(function() { 
    $('body').on('click', '#submitanswerbutton', function(event){ 

       //Getting the variable's value from a link 
     var answerBox = $(this).attr('href'); 

     //Fade in the Popup 
     $('.answer-popup').fadeIn(300); 

     //Set the center alignment padding + border see css style 
     var popMargTop = ($(answerBox).height() + 24)/2; 
     var popMargLeft = ($(answerBox).width() + 24)/2; 

     $(answerBox).css({ 
      'margin-top' : -popMargTop, 
      'margin-left' : -popMargLeft 
     }); 

     // Add the mask to body 
     $('body').append('<div id="mask"></div>'); 
     $('#mask').fadeIn(300); 

     return false; 
    }); 

    // When clicking on the mask layer the popup closed  
    $('#mask').live('click', function() { 
     $('#mask , .answer-popup').fadeOut(300 , function() { 
     $('#mask').remove(); 

    }); 
    return false; 
    }); 
}); 

// load Answers when click questions via Ajax 
// load Answer when clicking question 
$(document).ready(function() { 
    var url; 
    $('.question a').click(function(ev) { 
     url = $(this).attr('href'); 
     $('.answers').load('http://127.0.0.1:8000'+url, function(response){ 
     }); 
    return false; 
    }); 

    $('body').on('click', '#submitanswerbutton', function(ev) { 
     var pathname = window.location.pathname; 
     $('.answer-popup').load(url+'add_answer/'); 
    }); 
    return false; 
}); ​ 

Answer 1

가 #submitanswerbutton div에 외부에서 #의 answerbox div의 이동

:

<div id="submitanswerbutton"> 
    <a href="#answer-box" class="login-window"><div class="btn btn-primary">Ask a Question</a></div> 
</div> 
<div id="answer-box" class="answer-popup"></div>​ 

answerbox div의 첫 번째 DIV 안에있는 경우에, 당신은 (예를 들어 answerbox 클릭 할 때마다이를 넣어 커서를 텍스트 상자에 넣으면), 다른 answerbox를 여는 body click 이벤트를 호출하게됩니다! 당신 것, http://jsfiddle.net/manishie/2vmCy/