如何使用按钮隐藏 bpopup jquery?我有一个ajax响应,如果数据返回错误失败,将调用bpopup。然后在我的 bpopup 中我有一个“明白了!”按钮,当用户单击它时,它只会关闭 bpopup
$.ajax({
url: 'my_url',
type: "POST",
success: function(data){
if(data.error == 'failed){
$('#popup').bPopup({
modalClose: false,
opacity: 0.6,
positionStyle: 'fixed'
});
//then my bpopup has a button "Got it!"
$('.gotit').click(function(e) {
//Code the will hide the bpopup.
}
}
}
})
我已尝试$('#popup).hide();
,但它没有完全关闭bpopup
。
顺便说一句,这是我的弹出 html。
<div id="popup" style="display: none; min-width: 350px;">
<span class="button b-close"><span>X</span></span>
<div class="col-lg-12">
<p><span class="ui-icon ui-icon-alert"></span> The Code does not match the information provided.</p>
<button class="btn btn-primary btn-sm pull-right gotit">Got it</button>
</div>
</div>
最佳答案
首先
if(data.error == 'failed){
这里缺少 '
,所以添加它并使其:-
if(data.error == '失败'){
关闭弹出窗口有两种方式
1.直接隐藏弹窗。
$('.gotit').click(function() {
$(this).closest('#popup').hide();//hidepop-up directly
// also you can use $(this).parent().parent('#popup').hide();
});
示例:-
$('.gotit').click(function() {
$(this).closest('#popup').hide();//hidepop-up directly
// also you can use $(this).parent().parent('#popup').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" style="display: block; min-width: 350px;"><!--changed disply:block to show you that how it will work -->
<span class="button b-close"><span>X</span></span>
<div class="col-lg-12">
<p><span class="ui-icon ui-icon-alert"></span> The Code does not match the information provided.</p>
<button class="btn btn-primary btn-sm pull-right gotit">Got it</button>
</div>
</div>
2.触发弹窗的关闭按钮点击事件(如果关闭按钮代码已经编写并且可以运行)
$('.gotit').click(function() {
$('.b-close').click();
});
示例:-
$('.b-close').click(function() { //if your close button code is alwready written
$('#popup').hide();
});
$('.gotit').click(function(){
$('.b-close').click(); // trigger close button clik event
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" style="display: block; min-width: 350px;"><!--changed disply:block to show you that how it will work -->
<span class="button b-close"><span>X</span></span>
<div class="col-lg-12">
<p><span class="ui-icon ui-icon-alert"></span> The Code does not match the information provided.</p>
<button class="btn btn-primary btn-sm pull-right gotit">Got it</button>
</div>
</div>
关于javascript - 如何隐藏bpopup jquery?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44363644/