Twitter bootstrap Twitter引导模式&x27；不要消失

我正在使用Twitter引导模式对话框。当我单击引导模式对话框的submit按钮时，它会发送一个AJAX请求。我的问题是模态背景并没有消失。模态对话框确实会正确消失，但会保留在屏幕上创建不透明度的“模态背景”

---

我能做什么？

确保在执行AJAX请求时没有替换包含实际模式窗口的容器，因为在尝试关闭它时引导程序将无法找到对它的引用。在Ajax完整处理程序中，删除模式，然后替换数据

如果这不起作用，您可以通过执行以下操作来强制它消失：

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

---

我遇到了类似的问题：在模式窗口中，我有两个按钮，“取消”和“确定”。最初，这两个按钮都会通过调用

$（'#myModal'）.modal（'hide'）

（前面执行了一些代码时为“OK”），关闭模式窗口，场景如下：

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

打开模式窗口

执行一些操作，然后单击“确定”进行验证并关闭模式

再次打开模式并单击“取消”退出

重新打开模式，再次单击“取消”==>背景不再可访问 好吧，我的下一个同事救了我一天：与其调用

$（'#myModal'）.modal（'hide'）

，不如给你的按钮赋予属性

data dismission=“modal”

，并在“提交”按钮上添加一个“单击”事件。在我的问题中，按钮的HTML（嗯，细枝）代码是：

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

而“取消”按钮不会导致任何“单击”事件。模态现在正确关闭，让我再次玩“正常”页面。实际上，

data dismission=“modal”

应该是指示按钮（或任何DOM元素）应该关闭引导模式的唯一方法。

.modal（'hide'）

方法的行为似乎不太可控

---

希望这有帮助

即使我遇到了类似的问题，我也有以下两个按钮

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

---

我触发了“否”按钮的单击事件，该按钮具有

data dismission=“modal”

属性。这是有效的：）

确保应用模态行为的

$.modal（）

的初始调用传递的元素没有超出预期。如果发生这种情况，它将最终为集合中的每个元素创建一个模式实例，包括background元素。因此，当你看到其中一个复制品时，背景看起来可能已经被抛在后面了

在我的例子中，我尝试使用如下代码动态创建模式内容：

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

myModal=$（“…这里有很多HTML内容…”）；
$（'body'）.append（myModal）；
myModal.modal（）；

---

这里，结束标记

后的HTML注释意味着myModal实际上是两个元素的jQuery集合—div和注释。它们都被忠实地转换成情态动词，每个都有自己的背景元素。当然，评论中的语气除了背景之外是看不见的，所以当我关闭真实的语气（div）时，它看起来好像背景被抛在后面了。

我只是在这个问题上花了太长时间：）

虽然提供的其他答案是有帮助和有效的，但对我来说，从引导中有效地重新创建模式隐藏功能似乎有点混乱，所以我找到了一个更干净的解决方案

问题是当你打电话时会发生一连串的事件

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

当您随后替换一组HTML作为AJAX请求的结果时，模式隐藏事件不会完成。但是，当一切都完成时，引导会触发一个事件，您可以像这样挂接：

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

希望这是有帮助的

使用：

$('.modal.in').modal('hide') 

---

在.net MVC4项目中，我在Ajax.BeginForm（OnComplete=“addComplete”[额外代码删除]）中有一个模式弹出窗口（bootstrap 3.0）。在“addComplete”javascript中，我有以下代码。这解决了我的问题

$（'#moreLotDPModal'）.hide（）

$（“#moreLotDPModal”）.data（'bs.modal'）。isShown=false

$（'body'）.removeClass（'modal-open'）

$（'.modal background'）.remove（）

$（'moreLotDPModal'）.removeClass（“in”）

$（'moreLotDPModal'）.attr（'aria-hidden'，'true'）

更新面板问题

我的问题是由于updatepanel的位置。我在updatepanel中有整个模态。如果您在updatepanel之外声明了模态，并且只在update面板中声明了模态主体，那么 $（'#myModalID'）.modal（'hide'）；

---

工作。

我也有同样的问题。我发现这是由于Bootstrap和JQueryUI之间的冲突

---

两者都使用“close”类。在一个或另一个中更改类可以解决此问题。

此解决方案适用于Ruby on Rails 3.x和一个js.erb文件，该文件重建部分DOM，包括模式。无论ajax调用来自模式还是来自页面的不同部分，它都可以工作

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

---

感谢@BillHuertas作为起点。

我也遇到了同样的问题

但是我使用的是bootbox.js，所以可能与此有关

不管怎样，我意识到问题是由一个元素与其父元素具有相同的类引起的。当这些元素之一用于绑定单击函数以显示模态时，就会出现问题

i、 e.这就是问题的原因：

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

单击此处显示模态

---

更改它，使被单击的元素不具有与其父元素、任何子元素或任何其他祖先相同的类。在绑定单击功能时，通常这样做可能是一种好做法。

在操作按钮中插入以下内容：

data-backdrop="false"

及

例如：

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

完成
行动

如果输入此数据属性，则不会显示.modal背景。 有关它的文档，请点击此链接：

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

$('#myModal').modal({
   keyboard: false
})

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal-backdrop fade in"></div>

$('#myModal').modal('hide');

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

$('#myModal').trigger('click');

<body>
<!-- All other HTML -->
<div>
    ...
</div>

<!-- Modal -->
<div class="modal fade" id="myModal">
    ...
</div>

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}