我的代码有问题。如果我点击按钮搜索在我的表单,当一个字段有输入,我得到按钮搜索与弹出在同一时间。
但我只想在单击“搜索”按钮时显示弹出窗口。
代码html在以下链接中:https://jsfidle.net/ge5zxmst/
ACC.multiLogin = {
_autoload: [
"inputField",
"popUpModal"
],
inputField: function() {
var showHideButtonSearch = () => {
let hasValue = false;
$("#multiLogin-search input.text-input").each(function() {
if ($(this).val()) {
hasValue = true;
}
});
if (hasValue === false) {
$(".button-row [name=search]").hide();
} else {
$(".button-row [name=search]").show();
}
}
// Check input values on key up
$("#multiLogin-search input.text-input").keyup(function() {
showHideButtonSearch();
});
//Hide button search on page load
showHideButtonSearch();
},
popUpModal: function() {
$(".button-row [name=search]").show().on("click", function() {
$('.pop-outer').fadeIn('slow');
});
$(".close").on("click", function() {
$('.pop-outer').fadeOut('slow');
});
},
}
.pop-outer {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pop-inner {
background-color: #fff;
width: 500px;
height: 300%;
padding: 25px;
margin: 15% auto;
}
谢谢你帮忙。
在你的脚本中要做的修改很少。不要在button类之后使用空格。
$(".button-row[name=search]") <-- Correct
$(".button-row [name=search]") <-- Wrong
要显示弹出窗口,请使用下面的脚本。
$(".button-row[name=search]").on("click", function() {
$('.pop-outer').fadeIn('slow');
});
$("button.close").on("click", function() {
$('.pop-outer').fadeOut('slow');
});