사용자가 팝업 화면 외부의 페이지에서 아무 곳이나 클릭 할 때 동적으로 추가 된 팝업을 닫는 방법?

Question

나는 thickbox.js이라는 jQuery 팝업 라이브러리를 사용하고 있습니다.

내 페이지에 작은 이미지가 하나 있습니다. 사용자가이 이미지를 클릭하면 어떤 함수에 대한 호출이 주어지고, thickbox.js 라이브러리는 즉석에서 팝업을위한 HTML/CSS를 생성하고 팝업을 보여준다.

가장 중요한 것은 팝업이 표시 될 때 페이지의 HTML 소스가 표시되는 경우 팝업의 HTML 코드를 볼 수 없다는 것입니다. 나는 HTML 팝업 소스를 볼 수있는 요소를 검사하여 방화 광 콘솔을 통해 팝업의 HTML 소스를 보려고했습니다. 이는 DOM에 팝업 상자의 HTML 코드가 포함되어 있지 않음을 나타냅니다.

이제 사용자가 팝업 영역 이외의 페이지에서 아무 곳이나 클릭하면이 열린 팝업을 닫고 싶습니다. 몇 가지 코드를 시도했지만 불행히도 내가 원하는 일을 할 수 없습니다. 이제 나는이 문제에 대해 단서가 없다.

다음은 참조 용 코드입니다.

<a href="#" onclick="return $Core.box('prj_name.contactform', 400);"> 
<!-- This is the function call which generates the pop-up HTML on the fly --> 
    <img width="33" height="89" align="middle" border="0" pagespeed_url_hash="3893298907" alt="" src="http://58.189.67.789/theme/frontend/foxplus/style/default/image/layout/contact.jpeg"> 
</a> 

다음은 동적으로 생성되는 팝업 HTML입니다. 내가 불을 지르고 콘솔에서 찍은 다음과 같이 내가 노력

$('body').click(function(e) { 
    if($('.js_box_image_holder_full').length) { 
    if (!$(e.target).closest('.js_box_image_holder_full').length) { 
     $('.js_box_image_holder_full').hide(); 
    } 
    } 
}); 

두 번째 코드는 다음과 같습니다 : 다음과 같이 내가 노력

<div class="js_box_image_holder_full "> 
    <div id="js_box_id_3" class="js_box " style="width: 400px; top: 15%; left: 69%; margin-left: 0px; margin-top: 278px; z-index: 5003; display: block;"> 
    <div class="js_box_title">Contact</div> 
    <div class="js_box_content"> 
     <style type="text/css">#js-contact-message:after{content:'\1f603'}</style> 
     <div id="js_contact_message">Your details submit succesfully</div> 
     <div id="js_contact_error_message"></div> 
     <iframe style="display:none" name="js_contact_frame" id="js_contact_frame" frameborder="1" width="100%"> </iframe> 
     <div class="main_break"> 
     <form method="post" action="http://58.189.67.789/prj_name/contact/" id="js_contact_form" target="js_contact_frame">  
      <div class="table"> 
      <div class="p_left"> 
       <label for="email">Full Name</label> 
      </div> 
      <div class="p_right"> 
       <input name="val[full_name]" id="full_name" value="" size="60" type="text"> 
      </div> 
      <div class="clear"></div> 
      </div> 
      <div class="table"> 
      <div class="p_left"> 
       <label for="email">Email</label> 
      </div> 
      <div class="p_right"> 
       <input name="val[email]" id="email" value="" size="30" type="text"> 
      </div> 
      <div class="clear"></div> 
      </div> 
      <div class="table"> 
      <div class="p_left"> 
       <label for="text">Message</label> 
      </div> 
      <div class="p_right"> 
       <textarea name="val[text]" id="text"></textarea> 
      </div> 
      <div class="clear"></div> 
      </div> 
      <div class="table" style="display:none;"> 
      <div class="p_left">Send Yourself a Copy</div> 
      <div class="p_right"> 
      <input name="val[copy]" value="1" type="checkbox"> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="table_clear"> 
      <input value="Submit" class="button" type="submit"> 
      <div class="t_right"><span id="js_comment_process"></span></div> 
     </div> 
     </form> 
    </div> 
    <div class="js_box_title_store">Contact</div> 
    </div> 
    <div style="display: block;" class="js_box_close"> 
    <a href="#" onclick="return js_box_remove(this);">x</a> 
    <span class="js_box_history">prj_name.contactform</span> 
    </div> 
</div> 

JQuery와 코드는

$(document).click(function(event) { 
    if(!$(event.target).closest('.js_box_image_holder_full').length) { 
    if($('.js_box_image_holder_full').is(":visible")) { 
     $('.js_box_image_holder_full').hide() 
    } 
    }   
}) 

위의 두 코드 스 니펫의 문제는 사용자가 이미지를 클릭 할 때 팝업이 열리지 않는다는 것입니다. 또한 화재 경보기에서 오류나 경고를받지 못했습니다.

$(document).mouseup(function (e) { 
    var container = $(".js_box"); 

    if (!container.is(e.target) && container.has(e.target).length === 0) { 

    $(".js_box_image_holder_full").remove(); 
    } 
}); 

나는 위의 코드를 얻을 문제는 사용자가 팝업의 표면이 아닌 다른 페이지의 아무 곳이나 클릭하면 열린 포 업 가까이 얻을 수 있습니다 : 다음과 같이 내가 노력

세 번째 코드는 그러나 사용자가 이미지를 다시 클릭하여 팝업을 표시하면 다시 나타나지 않습니다. 이번에는 방화범 입력기에서 오류나 경고를받지 못했습니다.

Answer 1

팝업 용 플러그인을 사용하지 않지만 간단한 해결책이 있습니다. 방아쇠를 당기면 팝업 옆에있는 빈 마스크가 사라지고 페이드 아웃을위한 마스크가됩니다. 아래에 표시됩니다. 마법처럼

$(function(){ 
 
    $('.clickme').click(function(){ 
 
     $('.popup,.mask').fadeIn(); 
 
    }); 
 
    $('.mask').click(function(){ 
 
     $('.popup,.mask').fadeOut(); 
 
    }); 
 
});

.clickme{ 
 
    display:inline-block; 
 
    cursor:pointer; 
 
    padding:10px; 
 
    background:#00cfff; 
 
    color:#fff; 
 
} 
 
.mask{ 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    background:rgba(0,0,0,0.4); 
 
    z-index:2; 
 
    display:none; 
 
} 
 
.popup{ 
 
    display:none; 
 
    position:fixed; 
 
    top:20px; 
 
    left:20px; 
 
    width:100px; 
 
    height:100px; 
 
    background:#d30043; 
 
    z-index:3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='outer'> 
 
    <span class='clickme'>Click Me</span> 
 
    <div class='mask'></div> 
 
    <div class='popup'>I am a Popup</div> 
 
</div>