通过在弹出窗口之外单击来关闭弹出窗口

Question

I have researched this question and found proposed solutions, but none of them have worked for me. Every solution I find opens and closes the popup immediately.

Essentially, I am just wanting to be able to close the popup window without needing to click "close". If the user clicks outside of #formWrap then I am wanting the popup to close.

To see the popup appear without it fading away immediately, remove the line of code below:

$('#pdfPop').fadeOut(350); //This line here

Does anyone see what I am doing wrong?

 $('.pdfWrap').on('click', function (event) { $('#pdfPop').fadeIn(350); $('body').css('overflow', 'hidden'); }); //----- CLOSE $('[data-popup-close]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-close'); $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350); $('body').css('overflow', 'auto'); e.preventDefault(); }); /*$('body').click(function(e) { if (!$(e.target).closest('#pdfPop').length){ $('#pdfPop').fadeOut(350); } });*/ $(document).click(function(event) { if ( $(event.target).closest('#formWrap').get(0) == null ) { // alert('clicked outside'); $('#pdfPop').fadeOut(350); //This line here } else{ // alert('clicked inside'); } }); 

 #pdfPop { width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: #FFF; position: fixed; z-index: 9999; margin: 0; padding: 0; top: 0; right: 0; bottom: 0; display: none; } #popInner { position: relative; } #xClose { position: absolute; right: 50px; top: 20px; width: 33px; height: auto; } #pdfBlock1 { background: linear-gradient(to right bottom, #000, #231F20); width: 65%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="pdfWrap">Click Me</div> <div id="pdfPop" data-popup="pop1"> <div class="popInner"> <a class="popup-close" data-popup-close="pop1" href="#">Close</a> <span id="testVal"></span> <div id="formWrap" class="total-center"> <div id="pdfBlock1" class="iblock"> <p class="blockTW" id="TW">Download your 3D PDF</p> <form id="pdfForm" method="POST"> <input type="text" class="input block" id="company" maxlength="40" name="company" placeholder="Company Name"> </div><div id="pdfBlock2" class="iblock"> <input id="pdfButton" class="block" type="submit" value="Download File"> </form> </div> </div> </div> </div> 

Answer 1

why don't you just use stopPropagation :

$('.pdfWrap').on('click', function (event) {
    $('#pdfPop').fadeIn(350);
    $('body').css('overflow', 'hidden');
});


$('body, [data-popup-close]').on('click', function() {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    $('body').css('overflow', 'auto');

    e.preventDefault();
});

$('#pdfPop').click(function(e){
  e.stopPropagation();
});

Answer 2

I agree the answer is to stopPropagation() . I do believe that this is because .pdfWrap is a div and not an anchor or button.

 $('.pdfWrap').on('click', function(event) { event.stopPropagation(); //this is the only thing I changed. $('#pdfPop').fadeIn(350); $('body').css('overflow', 'hidden'); }); //----- CLOSE $('[data-popup-close]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('data-popup-close'); $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350); $('body').css('overflow', 'auto'); e.preventDefault(); }); /*$('body').click(function(e) { if (!$(e.target).closest('#pdfPop').length){ $('#pdfPop').fadeOut(350); } });*/ $(document).click(function(event) { if ($(event.target).closest('#formWrap').get(0) == null) { // alert('clicked outside'); $('#pdfPop').fadeOut(350); //This line here } else { // alert('clicked inside'); } }); 

 #pdfPop { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); color: #FFF; position: fixed; z-index: 9999; margin: 0; padding: 0; top: 0; right: 0; bottom: 0; display: none; } #popInner { position: relative; } #xClose { position: absolute; right: 50px; top: 20px; width: 33px; height: auto; } #pdfBlock1 { background: linear-gradient(to right bottom, #000, #231F20); width: 65%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="pdfWrap">Click Me</div> <div id="pdfPop" data-popup="pop1"> <div class="popInner"> <a class="popup-close" data-popup-close="pop1" href="#">Close</a> <span id="testVal"></span> <div id="formWrap" class="total-center"> <div id="pdfBlock1" class="iblock"> <p class="blockTW" id="TW">Download your 3D PDF</p> <form id="pdfForm" method="POST"> <input type="text" class="input block" id="company" maxlength="40" name="company" placeholder="Company Name"> </div> <div id="pdfBlock2" class="iblock"> <input id="pdfButton" class="block" type="submit" value="Download File"> </form> </div> </div> </div> </div>