twitter-bootstrap - Twitter 引导模式背景不会消失

Question

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

我能做些什么？

score 585 · Accepted Answer

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

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

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

score 66 · Accepted Answer

确保您$.modal()对应用模态行为的初始调用没有传入比您预期更多的元素。如果发生这种情况，它将最终为集合中的每个元素创建一个带有背景元素的模态实例。因此，当您实际上正在查看其中一个副本时，可能看起来背景已被遗忘。

就我而言，我试图使用如下代码即时创建模态内容：

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

这里，结束</div>标记后的 HTML 注释意味着 myModal 实际上是两个元素的 jQuery 集合 - div 和注释。他们都尽职尽责地变成了模态，每个都有自己的背景元素。当然，由评论组成的模态框在背景之外是不可见的，所以当我关闭真正的模态框（div）时，它看起来就像背景被留下了。

score 52 · Accepted Answer

我只是在这个问题上花了太长时间:)

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

问题是当你打电话时会发生一系列事件

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

然后，当您将一堆 HTML 作为 AJAX 请求的结果替换时，模式隐藏事件不会完成。但是，Bootstrap 会在一切都完成时触发一个事件，您可以像这样挂钩：

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

希望这有帮助！

score 39 · Accepted Answer

在您的操作按钮中插入：

data-backdrop="false"

和

data-dismiss="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>

如果您输入此数据属性，则不会出现 .modal-backdrop。此链接上有关它的文档：http: //getbootstrap.com/javascript/#modals-usage

score 25 · Accepted Answer

我知道这是一个非常古老的帖子，但这可能会有所帮助。这是我的一个非常小的解决方法

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

就是这样，这应该可以解决问题

score 20 · Accepted Answer

如果您使用从 getboostrap 站点本身复制并粘贴到 html 生成的选择器中，请确保删除注释 ''。Bootstrap 感到困惑，并认为评论是第二个模态元素。它为这个“第二个”元素创建了另一个背景。

score 9 · Accepted Answer

我遇到了类似的问题：在我的模式窗口中，我有两个按钮，“取消”和“确定”。最初，两个按钮都会通过调用（使用“OK”之前执行一些代码）来关闭模态窗口，$('#myModal').modal('hide')场景如下：

打开模态窗口
做一些操作，然后点击“OK”做验证并关闭模态
再次打开模式并单击“取消”关闭
重新打开模式，再次点击“取消”==>背景不再可用！

好吧，我的隔壁同事拯救了我的一天：不是调用$('#myModal').modal('hide')，而是为您的按钮提供属性data-dismiss="modal"并将“单击”事件添加到您的“提交”按钮。在我的问题中，按钮的 HTML（嗯，TWIG）代码是：

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

在我的 JavaScript 代码中，我有：

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

而没有“点击”事件归因于“取消”按钮。模态现在正确关闭，让我再次使用“正常”页面播放。实际上，似乎data-dismiss="modal"应该是指示按钮（或任何 DOM 元素）应该关闭 Bootstrap 模式的唯一方法。该.modal('hide')方法似乎以一种不太可控的方式运行。

希望这可以帮助！

score 9 · Accepted Answer

如果您太快地隐藏然后再次显示模式窗口，也会出现此问题。这在其他地方提到了问题，但我将在下面提供更多细节。

问题与时间和渐变过渡有关。如果您在前一个模态的淡出过渡完成之前显示一个模态，您将看到这个持续的背景问题（模态背景将以您的方式留在屏幕上）。Bootstrap 明确不支持多个同时模态，但这似乎是一个问题，即使您隐藏的模态和您显示的模态是相同的。

如果这是您的问题的正确原因，这里有一些缓解问题的选项。选项 #1 是一种快速简便的测试，用于确定淡入淡出过渡时间是否确实是您的问题的原因。

禁用模式的淡入淡出动画（从对话框中删除“淡入淡出”类）
更新模态文本而不是隐藏和重新显示它。
修复时间，使其在完成隐藏前一个模态之前不会显示模态。使用模式的事件来做到这一点。http://getbootstrap.com/javascript/#modals-events

以下是一些相关的引导问题跟踪器帖子。跟踪帖子的数量可能比我在下面列出的要多。

score 9 · Accepted Answer

.modal('隐藏')

手动隐藏模态。在模态实际上被隐藏之前（即在 hidden.bs.modal 事件发生之前）返回给调用者。

所以而不是

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

做

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

所以你一定要等到“隐藏”事件完成。

score 7 · Accepted Answer

另一个可能产生此问题的错误，

确保您没有bootstrap.js在页面中多次包含脚本！

score 5 · Accepted Answer

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

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

我想执行一些 ajax 操作，并在该 ajax 操作成功时关闭模式。所以这就是我所做的。

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

我触发了具有该data-dismiss="modal"属性的“否”按钮的单击事件。这有效:)

score 5 · Accepted Answer

5

利用：

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

资源

于 2013-11-26T07:10:08.807 回答

score 4 · Accepted Answer

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

这对我有用。它不会关闭，因为当您打开弹出窗口时，它会触发 2 或 3 个模态背景。所以当你做 $('#myModal')).modal('hide'); 它只影响一个模态背景，其余部分仍然存在。

score 3 · Accepted Answer

此解决方案适用于 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 的起点。

score 3 · Accepted Answer

在我的模式中添加data-dismiss="modal"任何按钮都对我有用。我希望我的按钮用 angular 调用一个函数来触发一个 ajax 调用并关闭模态，所以我.toggle()在函数中添加了一个，它运行良好。（在我的情况下，我使用了 abootstrap modal并使用了 some angular，而不是实际的模态控制器）。

<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 })
}

score 3 · Accepted Answer

应用最受好评的解决方案后，我遇到了一个问题，即它会破坏未来的模态正确打开。我发现我的解决方案效果很好

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

score 2 · Accepted Answer

更新面板问题。

我的问题是由于更新面板的位置。我在更新面板中有整个模式。如果您在更新面板之外声明模态并在更新面板中说模态体，那么 $('#myModalID').modal('hide'); 工作。

score 2 · Accepted Answer

仅供参考，以防有人遇到这种情况......我花了大约 3 个小时才发现最好的方法如下：

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

关闭模态的功能非常不直观。

score 2 · Accepted Answer

这个问题的另一种观点。（我使用的是 bootstrap.js 版本 3.3.6）

我错误地在javascript中手动初始化模态：

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

并通过使用

data-toggle="modal"

在此按钮中，如下例所示（在文档中显示）

<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>

打开模式时附加到我的 html 正文。这可能是使用函数关闭模式时的原因：

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

它只删除一个背景实例（如上所示），因此背景不会消失。但是，如果您使用data-dismiss="modal"add on html 如引导文档中所示，它确实会消失。

所以我的问题的解决方案是只在javascript中手动初始化模态而不使用数据属性，这样我既可以手动关闭模态也可以使用data-dismiss="modal"特性。

如果您遇到与我相同的问题，希望这会有所帮助。

score 1 · Accepted Answer

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

两者都使用“关闭”类。改变一个或另一个类可以解决这个问题。

score 1 · Accepted Answer

在 .net MVC4 项目中，我在 Ajax.BeginForm( OnComplete = "addComplete" [extra code deleted]) 中弹出了模式（bootstrap 3.0）。在“addComplete” javascript 中，我有以下代码。这解决了我的问题。

$('#moreLotDPModal').hide();

$("#moreLotDPModal").data('bs.modal').isShown = false;

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

$('#moreLotDPModal').removeClass("in");

$('#moreLotDPModal').attr('aria-hidden', "true");

score 1 · Accepted Answer

我在尝试提交表单时遇到了同样的问题。解决方案是将按钮类型从更改submit为button，然后处理按钮单击事件，如下所示：

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

score 1 · Accepted Answer

对于与模态组件无关的元素，请确保您没有在其他地方使用相同的元素 ID / 类。

也就是说.. 如果您使用类名“myModal”识别触发模式弹出窗口的按钮，请确保没有具有相同类名的不相关元素。

score 1 · Accepted Answer

对我来说，最好的答案是这个。

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

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

模态标记放置 始终尝试将模态的 HTML 代码放置在文档中的顶级位置，以避免其他组件影响模态的外观和/或功能。

从这个答案

score 1 · Accepted Answer

1

使用切换而不是隐藏，解决了我的问题

于 2016-09-04T02:01:50.627 回答

score 0 · Accepted Answer

我遇到了同样的问题。

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

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

即这是导致问题的原因：

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

更改它，以使被单击的元素与它的父元素、任何它的子元素或任何其他祖先都不具有相同的类。在绑定点击函数时，通常这样做可能是一个好习惯。

score 0 · Accepted Answer

//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');

小提琴-> https://jsfiddle.net/o6th7t1x/4/

score 0 · Accepted Answer

经过多次搜索后，这行代码解决了我的问题，我想在 ajax 成功时关闭模式：

$('#exampleModal').modal('hide');
$("[data-dismiss=modal]").trigger({ type: "click" });

非常感谢，曼努埃尔·费尔南多 https://stackoverflow.com/a/27218322/5935763

score 0 · Accepted Answer

在 ASP.NET 中，在 jquery 命令后面的代码上为 UpdatePanel 添加更新。例子：

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();

score 0 · Accepted Answer

我正在与 Meteor 合作，但我遇到了同样的问题。我的错误的原因是这样的：

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

如您所见，我在 else 中添加了模态，所以当我的模态更新联系人信息时，如果有另一个状态。这导致模态模板在关闭之前被排除在 DOM 之外。

解决方案：将模态移出 if-else：

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

score 0 · Accepted Answer

在浏览了所有答案后，我想出了一个包罗万象的解决方案。最终，这是唯一对我有用的东西。（香草JavaScript）：

            var elem = document.querySelectorAll('[data-dismiss="modal"]')[0];
            var evt = new Event('click');
            elem.dispatchEvent(evt);

            var modalelem = document.getElementById('exampleModalCenter');

            var myModal = new bootstrap.Modal(modalelem, { keyboard: false })

            const fade = modalelem.classList.contains('fade');
            if (fade) {
                modalelem.classList.remove('fade');
            }

            myModal.hide();
            myModal.dispose();

            var backdrop = document.getElementsByClassName('modal-backdrop')[0];
            backdrop.style.display = 'none';

            var modalopen = document.getElementsByClassName('modal-open')[0];
            modalopen.classList.remove('modal-open');
            modalopen.style.removeProperty("overflow");\

score 0 · Accepted Answer

我遇到了模态背景屏幕冻结问题，但情况略有不同：当显示 2 个背靠背模态时。例如，第一个会要求确认做某事，并且在单击“确认”按钮后，该操作会遇到错误，并且将显示第二个模式以弹出错误消息。第二个模态背景将冻结屏幕。元素的类名或 id 没有冲突。

解决问题的方法是给浏览器足够的时间来处理模态背景。与其在单击“确认”后立即采取行动，不如给浏览器说 500 毫秒来隐藏第一个模式并清理背景等 - 然后采取最终会显示错误模式的操作。

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

_dialogConfirmed() 函数具有以下代码：

    var that = this;

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

我猜其他解决方案之所以有效，是因为它们花费了足够的额外时间，为浏览器提供了所需的清理时间。

score 0 · Accepted Answer

在某些情况下，其他答案（有用且有效）无法轻松应用。然后一个可能的解决方法是实现一个事件，在模态对话框消失后不久触发对模态背景的点击。

这是一个基于以下模式对话框的示例：

<div class="modal fade ..." id="IdOfMyModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>

要在单击模式时删除“modal-backdrop in”（在屏幕上创建背景不透明度），请添加以下代码：

$('#IdOfMyModal').on("click", function() {
    setTimeout(function() {
        if ($('#IdOfMyModal').css("opacity") != "1")
            $('.modal-backdrop').trigger('click');
    }, 100);
});

score 0 · Accepted Answer

我有一个类似的问题。我将 Boostrap 与 Backbone 结合使用，我正在捕获“执行”按钮的点击，然后停止这些事件的传播。奇怪的是，这使模态消失了，但背景却没有。如果我调用 event.preventDefault() 但不调用 stopPropagation()，则一切正常。

score 0 · Accepted Answer

尝试这个

$('#something_clickable').on('click', function () {
  $("#my_modal").modal("hide");
  $("body").removeClass("modal-open");
  $('.modal-backdrop').remove();
 });

这对我来说可以。

score 0 · Accepted Answer

来自https://github.com/twbs/bootstrap/issues/19385

Modal 的显示/隐藏方法是异步的。因此，代码如：

foo.modal("hide"); bar.modal("show");是无效的。在再次调用 show 或 hide 方法之前，您需要等待显示/隐藏实际完成（通过监听显示/隐藏事件；请参阅 http://getbootstrap.com/javascript/#modals-events ）。

当我两次太快打开同一个模态时我遇到了这个问题，所以一个简单的解决方法是检查它是否已经显示，然后不再显示它：

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}

score 0 · Accepted Answer

the initial value of your data-backdrop attribute can be

"static","true", "false" .

static and true add the modal shadow, while false disable the shadow, so you just need to change this value with the first click to false . like this:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

score 0 · Accepted Answer

最近我遇到了这个问题，这里提供的解决方案都没有帮助我。或者它完全摧毁了它，因此它无法再次显示。在准备好文档时也没有工作，但有效的是我用立即调用的函数包装了我的所有听众，如下所示：

$(function () {
    $('#btn-show-modal').click(function () {
        $("#modal-lightbox").modal('show');
    });

    $('#btn-close-modal').click(function () {
        $("#modal-lightbox").modal('hide');
    });
});

twitter-bootstrap - Twitter 引导模式背景不会消失

38 回答 38

Related

Reference