jQuery彈出框未關閉

Question

jQuery彈出框未關閉。它可以正確打開，但當我點擊close或「x」時不會關閉。

如果我刪除＃從href =「＃」，那麼該框將關閉，但加載頁面的URL。我想在不加載網址的情況下關閉此框。

我有什麼問題？

jQuery(function() { 
 
    //----- OPEN 
 
    jQuery('[data-popup-open]').on('click', function(e) { 
 
     var targeted_popup_class = jQuery(this).attr('data-popup-open'); 
 
     jQuery('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); 
 

 
     e.preventDefault(); 
 
    }); 
 

 
    //----- CLOSE 
 
    jQuery('[data-popup-close]').on('click', function(e) { 
 
     var targeted_popup_class = jQuery(this).attr('data-popup-close'); 
 
     jquery('[data-popup="' + targeted_popup_class + '"]').fadeOut(3); 
 

 
     e.preventDefault(); 
 
    }); 
 
});

/* Outer */ 
 
.popup { 
 
    width:100%; 
 
    height:100%; 
 
    display:none; 
 
    position:fixed; 
 
    top:0px; 
 
    left:0px; 
 
    background:rgba(0,0,0,0.75); 
 
} 
 
    
 
/* Inner */ 
 
.popup-inner { 
 
    max-width:700px; 
 
    width:90%; 
 
    padding:40px; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    -webkit-transform:translate(-50%, -50%); 
 
    transform:translate(-50%, -50%); 
 
    box-shadow:0px 2px 6px rgba(0,0,0,1); 
 
    border-radius:3px; 
 
    background:#fff; 
 
} 
 

 

 

 

 

 
/* Close Button */ 
 
.popup-close { 
 
    width:30px; 
 
    height:30px; 
 
    padding-top:4px; 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0px; 
 
    transition:ease 0.25s all; 
 
    -webkit-transform:translate(50%, -50%); 
 
    transform:translate(50%, -50%); 
 
    border-radius:1000px; 
 
    background:rgba(0,0,0,0.8); 
 
    font-family:Arial, Sans-Serif; 
 
    font-size:20px; 
 
    text-align:center; 
 
    line-height:100%; 
 
    color:#fff; 
 
} 
 

 

 

 

 
.popup-close:hover { 
 
    -webkit-transform:translate(50%, -50%) rotate(180deg); 
 
    transform:translate(50%, -50%) rotate(180deg); 
 
    background:rgba(0,0,0,1); 
 
    text-decoration:none; 
 
}

<a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a> 
 
    
 
<div class="popup" data-popup="popup-1"> 
 
    <div class="popup-inner"> 
 
     <h2>Have some feedback?</h2> 
 
     <p>Use the feedback box below if you have a question, comment or general feedback.</p> 
 
     <p><a data-popup-close="popup-1" href="#">Close</a></p> 
 
     <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 
 
    </div> 
 
</div>

Answer 1

您已經錯字..

這 - >jquery('[data-popup="' + targeted_popup_class + '"]').fadeOut(3);

應該是jQuery，而不是jquery。不要猶豫，看看控制檯日誌，如果事情沒有按預期工作。

jQuery(function() { 
 
    //----- OPEN 
 
    jQuery('[data-popup-open]').on('click', function(e) { 
 
     var targeted_popup_class = jQuery(this).attr('data-popup-open'); 
 
     jQuery('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); 
 

 
     e.preventDefault(); 
 
    }); 
 

 
    //----- CLOSE 
 
    jQuery('[data-popup-close]').on('click', function(e) { 
 
     var targeted_popup_class = jQuery(this).attr('data-popup-close'); 
 
     jQuery('[data-popup="' + targeted_popup_class + '"]').fadeOut(3); 
 

 
     e.preventDefault(); 
 
    }); 
 
});

/* Outer */ 
 
.popup { 
 
    width:100%; 
 
    height:100%; 
 
    display:none; 
 
    position:fixed; 
 
    top:0px; 
 
    left:0px; 
 
    background:rgba(0,0,0,0.75); 
 
} 
 
    
 
/* Inner */ 
 
.popup-inner { 
 
    max-width:700px; 
 
    width:90%; 
 
    padding:40px; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    -webkit-transform:translate(-50%, -50%); 
 
    transform:translate(-50%, -50%); 
 
    box-shadow:0px 2px 6px rgba(0,0,0,1); 
 
    border-radius:3px; 
 
    background:#fff; 
 
} 
 

 

 

 

 

 
/* Close Button */ 
 
.popup-close { 
 
    width:30px; 
 
    height:30px; 
 
    padding-top:4px; 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0px; 
 
    transition:ease 0.25s all; 
 
    -webkit-transform:translate(50%, -50%); 
 
    transform:translate(50%, -50%); 
 
    border-radius:1000px; 
 
    background:rgba(0,0,0,0.8); 
 
    font-family:Arial, Sans-Serif; 
 
    font-size:20px; 
 
    text-align:center; 
 
    line-height:100%; 
 
    color:#fff; 
 
} 
 

 

 

 

 
.popup-close:hover { 
 
    -webkit-transform:translate(50%, -50%) rotate(180deg); 
 
    transform:translate(50%, -50%) rotate(180deg); 
 
    background:rgba(0,0,0,1); 
 
    text-decoration:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a> 
 
    
 
<div class="popup" data-popup="popup-1"> 
 
    <div class="popup-inner"> 
 
     <h2>Have some feedback?</h2> 
 
     <p>Use the feedback box below if you have a question, comment or general feedback.</p> 
 
     <p><a data-popup-close="popup-1" href="#">Close</a></p> 
 
     <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 
 
    </div> 
 
</div>