jQuery弹出框未关闭

Question

jQuery弹出框未关闭。 它可以正确打开，但是当我单击“关闭”或“ 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>