Twitter引导模态背景不会消失

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

我能做什么？

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

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

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

确保您最初$.modal()对应用模态行为的调用没有传递比预期更多的元素。如果发生这种情况，它将最终为集合中的EACH元素创建一个模态实例，并带有背景元素。因此，当您实际上正在查看重复项之一时，看起来好像已经留下了背景。

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

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

在这里，结束</div>标记后的HTML注释意味着myModal实际上是两个元素的jQuery集合-div和注释。他们两个都尽职尽责地变成了模态，每个模态都有自己的背景元素。当然，从注释中提取出来的模态除了背景之外是不可见的，因此当我关闭实际模态（div）时，看起来好像背景被抛在了后面。

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

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

问题在于，当您致电时会发生一系列事件

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

然后，由于AJAX请求而替换了一堆HTML时，模式隐藏事件不会结束。但是，Bootstrap会在所有操作完成后触发一个事件，您可以像这样将其插入：

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

希望这会有所帮助！

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

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-drop。有关此链接的文档：http : //getbootstrap.com/javascript/#modals-usage

如果您正在使用复制并将其从getboostrap站点本身粘贴到html生成的选择器中，请确保删除注释“ <！-/.modal->”。Bootstrap感到困惑，并认为注释是第二个模式元素。它为此“第二”元素创建了另一个背景。

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

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

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

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

1. 打开模式窗口
2. 做一些操作，然后单击“确定”以验证它们并关闭模式
3. 再次打开模态，然后单击“取消”关闭
4. 重新打开模态，再次单击“取消” ==>不再可以使用背景幕！

好吧，我的下一位同桌保存了我的一天：与其调用$('#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')方法的行为似乎不是很可控。

希望这可以帮助！

如果您隐藏然后又快速显示模态窗口，也会发生此问题。这是在其他地方提到的问题，但我将在下面提供更多详细信息。

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

如果这是导致问题的正确原因，请使用以下一些缓解问题的方法。选项1是一种快速简便的测试，可以确定淡入淡出过渡时间是否确实是造成问题的原因。

1. 禁用模态的淡入淡出动画（从对话框中删除“淡入淡出”类）
2. 更新模态的文本，而不是隐藏并重新显示它。
3. 修正时间，以使其在完成隐藏前一个模态之前不会显示模态。使用模式事件来执行此操作。http://getbootstrap.com/javascript/#modals-events

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

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal（'hide'）

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

所以代替

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

做

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

因此，您一定要等到“隐藏”事件结束。

另一个可能导致此问题的错误，

确保您bootstrap.js在页面中不只包含一次脚本！

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

<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"属性的“否”按钮的点击事件。这有效:)

用：

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

资源

该解决方案适用于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作为起点。

$（'＃myModal'）。trigger（'click'）;

这对我有用。它没有关闭，因为当您打开弹出窗口时，它会触发2或3个模态背景。所以当你做$（'＃myModal'））。modal（'hide'）; 它只影响一个模态背景，其余部分保持不变。

updatepanel问题。

我的问题是由于updatepanel的位置。我在updatepanel中拥有整个模式。如果在updatepanel外部声明模式，并在更新面板中说了模式主体，则$（'＃myModalID'）。modal（'hide'）; 工作了。

对这个问题的另一种观点。（我正在使用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"在引导文档中使用html上的add进行显示，它的确消失了。

因此，解决我的问题的方法是仅在javascript中手动初始化模式，而不使用data属性。这样，我既可以手动关闭模式，也可以使用data-dismiss="modal"功能关闭。

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

仅供参考，以防万一有人碰到了这个静止……我花了大约3个小时才发现最好的方法如下：

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

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

data-dismiss="modal"在我的模式中添加任何按钮都对我有用。我想让我的按钮使用angular来调用一个函数来触发ajax调用并关闭模态，所以我.toggle()在函数中添加了一个，效果很好。（在我的情况下，我使用了a bootstrap modal并使用了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 })
}

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

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

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

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

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

应用评分最高的解决方案后，我遇到了一个问题，即它无法正常打开将来的模态。我发现我的解决方案效果很好

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

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

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

在.net MVC4项目中，我在Ajax.BeginForm（OnComplete =“ addComplete” [多余的代码已删除]）中弹出了模式弹出窗口（引导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”）;

我有同样的问题。

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

无论哪种方式，我都意识到问题是由与父类具有相同类的元素引起的。当这些元素之一用于绑定单击功能以显示模式时，就会出现问题。

即这是导致问题的原因：

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

对其进行更改，以使所单击的元素与其父级，任何子级或任何其他祖先不具有相同的类。绑定单击功能时，通常最好这样做。

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

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

如您所见，我在else中添加了模态，因此当我的模态更新了联系信息时，if处于另一个状态。这导致模式模板在即将关闭之前就被排除在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}}

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

您的数据背景属性的初始值可以是

“ static”，“ true”，“ false”。

static和true会添加模态阴影，而false会禁用阴影，因此您只需将第一次单击更改为false即可更改此值。像这样：

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


});

我遇到了模态背景幕冻结问题，但情况稍有不同：显示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);

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

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

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