如何使用按钮隐藏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 == 'failed'){
关闭弹出窗口可以通过两种方式完成
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>