Question

Bootstrap模态隐藏不起作用。 警报来自其他地方。但是我的模态没有隐藏添加了bootply。我的问题是一样的。

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</div>



<script type="text/javascript">
$("#buy").click(function () {
   var a = 4;
   if (a == 5) {
     alert("if");
     $('#myModal').modal('show');
   }
   else {
    alert("else");
    $('#myModal').modal('hide');
   }

});
</script>

bootply

Answer 1

您正在使用两种模态切换方法：通过Javascript和数据属性。因此，您的点击会触发模态显示作为您的数据属性集，并且您的Javascript不会影响此触发器。

只需删除数据属性并使用Javascript方法：

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>

Answer 2

我遇到了同样的问题，尝试了很多东西，但唯一对我有用的解决方案是@Tang Chanrith建议删除模态的单独部分，但稍微改进后放回滚动条。如果接受的答案对他们不起作用，我会给出答案。对不起我的英语不好。希望我帮忙。

@Tang Chanrith

尝试此功能

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $("#myModal").hide();
}

改善溶出度

您只需要从生成

的body和css中删除一个类

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $("#myModal").hide();
}

Answer 3

对于那些仍然有问题的人（嗨，Google员工！），如果您使用的是淡入淡出，则必须使用JavaScript删除淡入淡出类。

Answer 4

我有同样的问题。删除fade类。

Answer 5

尝试此功能

function hideModal(){
    $("#myModal").removeClass("in");
    $(".modal-backdrop").remove();
    $("#myModal").hide();
}

Answer 6

我检查了你的代码。现在你比较一个== 5.但是a总是4.你可能必须检查这个为什么要进行这种比较。如果你想从javascript打开模态，你还需要删除数据目标：

<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>

data-target直接打开模态。检查这是否有效。

Answer 7

尝试像这样添加return false：

$("#buy").click(function () { 
  var a = 4;
  if (a == 5) {
    alert("if");
    $('#myModal').modal('show');
  }
  else {
    alert("else");
    $('#myModal').modal('hide');
  }
  return false;
});

Answer 8

您应该尝试此$('.modal.in').modal('hide')

通过https://github.com/twbs/bootstrap/issues/489

Answer 9

我解决了这个问题。

$('#landingpage, body').on('click',function(){
    $( ".action-close" ).trigger( "click" );});

Answer 10

使用引导程序隐藏模式对话框

方法1：使用引导程序

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

方法2：使用停止传播

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

方法3：显示的方法调用后

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

方法4：使用CSS

this.display='block'; //Set block css
this.display='none'; //set none css after close dialog

Answer 11

删除模态类“ fade”即可。

Answer 12

以上解决方案均不适合我。如果是这种情况，请尝试模仿关闭按钮（动态添加的按钮）上的click事件：

cd\ Rem  to return to the root folder of C
dir ????.com /b/s Rem  COM files with 4 letters
pause Rem to pause the screen
dir ?I*.exe /s Rem  search EXE files whose 2nd letter is I

<div class="modal" tabindex="-1" role="dialog" id="modal" area-hidden="true" style="display: inline-block;"> <div class="modal-dialog modal-dialog-centered" role="document"> ... </div> <a href="#close-modal" rel="modal:close" class="close-modal ">Close</a></div> </div>应该可以解决问题。

Answer 13

检查是否关闭了主模式div中的所有嵌套div

<div data-backdrop="static" class="modal fade" id="modal-progress" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

-----NESTED DIV ------------------

</div>

Answer 14

一个可能的原因应该是jquery和bootstrap的顺序，并且脚本的顺序不正确。下面应该是顺序。

1. <script src='js/jquery-3.2.1.min.js'></script>
2. <script src='js/bootstrap.min.js'></script>
3. your own script:
<script type="text/javascript">
$("#buy").click(function () {
   var a = 4;
   if (a == 5) {
     alert("if");
     $('#myModal').modal('show');
   }
   else {
    alert("else");
    $('#myModal').modal('hide');
   }

});
</script>

Answer 15

在打开加载模式之前，请确保关闭所有其他模式。这是用来关闭模态的函数：

function hideLoadingModal() {
    $('#loadingModal').on('shown.bs.modal', function () {
        $('#loadingModal').modal('hide');      
    }); 
}

现在，如果要打开模式，请调用上面的函数，然后再打开一个新函数。像这样：

hideLoadingModal();
$('#loadingModal').modal('show');

希望这对您有所帮助。

欢呼

Answer 16

我也遇到了同样的问题，无法找到正确的解决方案。

后来我观察到，当模式运行良好时，关闭它会发生什么情况。

三个主要属性是

modal-open类已从<body>标记中删除。
在<body>标签中更改CSS。

<div>

modal-backdrop类。

因此，当您手动执行这些操作时，您将在不起作用时实现它。

代码应在Jquery中如下

      $('body').removeClass('modal-open');        
      $('body').css('padding-right', '');
      $(".modal-backdrop").remove();
      $('#myModal').hide();

因此，尝试一下并获得解决方案。

Answer 17

当我使用绑定到该链接的data-toggle =“ modal”属性单击链接时，我正在打开模式弹出窗口，并尝试使用javascript将其关闭，但每次均失败，因此，当我从该链接中删除“数据切换”属性和“ href”并使用javascript打开它时，它也正使用javascript正常关闭。

从下面几行代码中，您可以轻松理解

<a href="#CustomerAdvancedModal" data-toggle="modal" class="classShowAdvancedSearch">Advanced Search</a>

我将上面的链接更改为此链接

 <a href="#" class="ebiz-Advanced-Search classShowAdvancedSearch">Advanced Search</a>

之后，当我尝试使用javascript将其关闭时，我就会成功

$("#CustomerAdvancedModal").modal('hide');

Answer 18

我有同样的问题。我尝试了帖子中建议的JavaScript方式，但是不幸的是，它只工作了一半时间。如果我几次触发了模态，它就会出错。结果，我创建了一个使用CSS的方法：

/* Hide the back drop*/
.modal-backdrop.show {
    display: none;
}
/* Simulate the backdrop using background color */
.modal-open .modal {
    background-color: rgba(47, 117, 19, 0.3);
}

Answer 19

正如我遇到的，有时您需要删除显示样式：

style="display: block;"

Answer 20

我有同样的问题，我的错误是我试图打开模态窗口几次。在尝试打开之前，我们必须测试模态窗口是否尚未打开。

    if (!($("#MyModal").data('bs.modal') || {})._isShown){ 
        $("#MyModal").modal('show');
    }

Answer 21

在java脚本代码中，您需要添加一行代码

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

Bootstrap模态隐藏不起作用

21 个答案: