首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何隐藏bpopup jquery?

如何隐藏bpopup jquery?
EN

Stack Overflow用户
提问于 2017-06-05 07:18:10
回答 1查看 618关注 0票数 1

如何使用按钮隐藏?我有一个ajax响应,如果数据返回错误失败了,就会调用bpopup。然后在我的弹出式窗口里我有一个“明白了!”按钮当用户单击它时,它只会关闭弹出窗口。

代码语言:javascript
复制
 $.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。

代码语言:javascript
复制
 <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>&nbsp;&nbsp;The Code does not match the information provided.</p>
          <button class="btn btn-primary btn-sm pull-right gotit">Got it</button>
     </div>
 </div>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-05 07:22:45

首先,

这里的if(data.error == 'failed){ '被错过了,所以添加它,并使它:-

if(data.error == 'failed'){

关闭弹出可以通过两种方式实现-

1.直接弹出.

代码语言:javascript
复制
$('.gotit').click(function() {

  $(this).closest('#popup').hide();//hidepop-up directly

  // also you can use $(this).parent().parent('#popup').hide();
});

例子:-

代码语言:javascript
复制
$('.gotit').click(function() {

  $(this).closest('#popup').hide();//hidepop-up directly
  
  // also you can use $(this).parent().parent('#popup').hide();
});
代码语言:javascript
复制
<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>&nbsp;&nbsp;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.2.Trigger关闭按钮单击弹出事件(如果关闭按钮代码已经编写并工作)

代码语言:javascript
复制
$('.gotit').click(function() {
  $('.b-close').click();
});

例子:-

代码语言:javascript
复制
$('.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
});
代码语言:javascript
复制
<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>&nbsp;&nbsp;The Code does not match the information provided.</p>
          <button class="btn btn-primary btn-sm pull-right gotit">Got it</button>
     </div>
 </div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44363644

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档