Javascript onblur 이벤트 알림 상자가 사라지지 않습니다.

Question

JS 경고를 발생시키는 blur 이벤트를 사용하고 있습니다. 내가 이벤트를 호출하는 입력 상자를 클릭 한 다음 브라우저 나 탭 등에서 새 탭 단추를 클릭하지 않으면 입력 상자의 흐림 효과로 인해 경고가 표시됩니다. 그러나 경고는 OK를 클릭해도 사라지지 않습니다. 그러나 동일한 페이지 또는 브라우저 탭 안의 아무 곳이나 클릭하는 경우에는 발생하지 않습니다. 그런 다음 확인 버튼을 클릭하면 경고 상자가 닫힙니다. 사용자가 입력 상자에

html로

<input pattern=".{10,}" type='text' id='phone' name="Phone" maxlength="10" placeholder="Phone" <?php if(isset($_POST['Phone'])){echo "Value ='$_POST[Phone]'";}?> required> 

JS를

$('#phone').blur(function(){checkValue($(this).val());}); 

function checkValue(phval) { 
    var res = phval.substr(0, 1); 
    if (res!=="7" && res!=="8" && res!=="9") { 
     alert("Number has to be Mobile number starting with 7, 8 or 9/Your Value is "+phval); 
    } 
} 

그것은 보인다 붙여 다른 곳에서 데이터를 복사 할 수 있기 때문에 새 탭 등을 클릭 할 필요가 몇 가지 간단한 문제입니다. 그러나 나는 그것을 발견 할 수 없다.

Answer 1

이것은 div와 같이 "Modal"을 사용하려는 T.J.Crowder의 제안에서 영감을 얻어 내 문제를 해결하기 위해 만든 답변보다 해결 방법입니다.

경고가 아닌 흐림 이벤트의 오류 div에서 페이드를 만들었습니다. 그런 다음 클릭하여 사라지게하십시오. JS 경보 상자처럼 거의 행동합니다. 유일한 것은 경고/팝업시 페이지의 모든 활동을 고정시키지 않는다는 것입니다.

HTML

<input pattern=".{10,}" type='text' id='phone' name="Phone" maxlength="10" placeholder="Phone" <?php if(isset($_POST['Phone'])){echo "Value ='$_POST[Phone]'";}?> required> 

<div id="pop"> 
    <div class="errormsg">Mobile Number has to start with 7,8, or 9 !</div> 
<br> 
    <div id="popclose">OK</div> 
</div> 

CSS

#pop{ 
    display:none 
} 

#pop{ 
    position:absolute; 
    left:0; 
    right:0; 
    top:40%; 
    width:350px; 
    margin:0 auto; 
    text-align:center; 
    padding:10px; 
    background-color:maroon; 
    border:5px solid yellow; 
    color:white 
} 

#popclose{ 
    width:20px; 
    text-align:center; 
    margin:0 auto; 
    padding:5px; 
    cursor:pointer; 
    font-weight:bold; 
    color:yellow 
} 

.errormsg{ 
    font-weight:bold 
} 

JS

function checkValue(phval) { 

$('#phone').blur(function(){checkValue($(this).val());return true;}); 
    var res = phval.substr(0, 1); 
    if (res!=="7" && res!=="8" && res!=="9") { 
//  alert("Number has to be Mobile number starting with 7, 8 or 9/Your Value is "+phval); 
      $('#pop').fadeIn('fast'); 

    } 

} 

$('document').ready(function(){ 
    $('#popclose').click(function(){ 
     $('#pop').fadeOut('fast'); 
    }); 
}); 

당신에게 TJ 크라우 감사