jQuery弹出框未关闭
jQuery popup box not closing
本文关键字:jQuery 更新时间:2023-09-26
jQuery弹出框未关闭。它打开正确,但不会关闭,当我点击关闭或"x"。
如果我从href="#"中删除#,那么该框将关闭,但会加载页面的url。我希望该框关闭而不加载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>
你打错了…
This -> 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>
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用jquery在填充自动完成的值后使文本框只读
- jQuery:循环一个具有不同超时值的循环
- 用程序搜索JQuery数据表中的文本
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jQuery匹配JSON对象的部分文本
- Jquery POST未填充数组
- JQuery使计数器每次更改时都会增加
- 如何在Angular2中使用jQuery插件
- 提高JQuery的性能
- 无法在通过jQuery的ajax加载的页面中执行javascript
- JQuery合并了keyup和focusout两个函数
- 如何使用jQuery选择下拉列表的值
- 将PHP变量传递给jQuery时遇到问题
- jQuery UI自动完成突然停止工作
- 剑道网格jQuery动画()问题
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- jquery点击函数select&取消选择
- jquery试图按名称获取按钮位置