Twitter的引导模式，背景不消失(Twitter bootstrap modal-backdro

我使用Twitter的引导模态对话框。 当我点击了引导模式对话框的提交按钮，它会发送一个Ajax请求。 我的问题是，模式，背景不会消失。 模态对话框不正确地消失，而是“模式，背景中的”创建在屏幕上保持透明度

我能做什么？

Answer 1:

确保你没有更换含有当你做AJAX请求的实际模态窗口的容器，因为引导将无法找到一个参考吧，当你试图将其关闭。 在你的Ajax完整的处理程序删除模式，然后替换数据。

如果不工作，你总是可以迫使它通过执行以下操作走开：

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

Answer 2:

请确保您的初始呼叫$.modal()应用模式的行为不是传递更多的元素比您预期。 如果发生这种情况，它最终将建立一个模式实例，完整的背景元素，集合中的每个元素。 因此，它可能看起来像的背景下已经落伍，而实际上你看重复的一个。

就我而言，我试图创建模式与内容像这样的一些代码对即时：

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

在这里，收盘后的HTML注释</div>标签意味着myModal竟是两个元素的一个jQuery的收藏- DIV和评论。 两人都尽职尽责地变成了情态动词，每一个都有自己的背景元素。 当然，模式做出来的评论是从背景除了看不见的，所以当我关闭了真正的模态（股利），它看起来像的背景被留下。

Answer 3:

我只花了太多的时间在这个问题:)

虽然所提供的其他的答案是有益的，有效的，它似乎有点乱给我有效地再现从引导模态隐藏功能，让我发现了一个清晰的解决方案。

问题是，还有当你调用发生的事件链

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

当你再更换一串HTML作为Ajax请求的结果，模态隐藏事件不会结束。 然而，引导触发时，一切都完了一个事件，你可以连接到该像这样：

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

希望这是有帮助的！

Answer 4:

插入您的操作按钮如下：

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>

如果你进入这个数据ATTR不会出现.modal-背景。 关于它的这个链接文档： http://getbootstrap.com/javascript/#modals-usage

Answer 5:

如果您使用的副本，并从getboostrap网站本身到HTML生成的选择粘贴，请确保您删除注释“<！ - /.modal - >”。 引导迷糊，认为该评论是第二模式元素。 它创建了这个“第二”元素的另一个背摔。

Answer 6:

我遭遇了类似的问题：在我的模式窗口，我有两个按钮，“取消”和“OK”。 原来，这两个按钮将调用关闭模式窗口$('#myModal').modal('hide')点击“OK”之前执行一些代码）和情景将是以下几点：

1. 打开模态窗口
2. 做一些操作，然后点击“确定”就对其进行验证和关闭模式
3. 再次打开模式，并通过点击“取消”开除
4. 重新打开该模式，“取消”再次点击==>的背景下是无法再访问！

好了，我的同胞下一个办公桌救了我的一天：而不是调用$('#myModal').modal('hide')给你的按钮属性data-dismiss="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>

在我的JavaScript代码，我有：

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

虽然没有“点击”事件被归结为“取消”按钮。 该模式现在正确关闭，让我与“正常”的页面重新播放。 实际上，它似乎data-dismiss="modal"应该是唯一的方式来表明一个按钮（或其他DOM元素）应该关闭引导模式。 该.modal('hide')方法似乎在不太可控的方式行事。

希望这可以帮助！

Answer 7:

如果隐藏，然后过快再次显示模态窗口，也会出现此问题。 这是其他地方所提到的问题，但我会在下面提供一些更多的细节。

该问题与时间，以及淡入淡出过渡到做。 如果你表现出褪色前一个模式出来之前的模式过渡完成后，你会看到这种持续的背景下问题（模态背景会停留在屏幕上，在你的方式）。 引导明确不支持多个同时情态动词，但是这似乎是一个问题，即使你隐藏模式，而且您是该模式是相同的。

如果这是你的问题的正确原因，这里是缓解问题的一些选项。 选项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

Answer 8:

我知道这是一个很老的文章，但这种可能的帮助。 这是一个非常小的解决方法由我

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

这就是它，这应该解决问题

Answer 9:

.modal（ '隐藏'）

手动隐藏模式。 返回到之前的模态主叫方实际上已经隐藏 （在hidden.bs.modal事件发生前即）。

因此，而不是

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

做

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

所以你一定要等到“隐藏”事件结束。

Answer 10:

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

<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 () {}
        });

我引发了“否”按钮，有Click事件data-dismiss="modal"属性。 而这个工作:)

Answer 11:

使用：

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

资源

Answer 12:

该解决方案是Ruby on Rails的3.X和重建DOM包括模式的一部分js.erb文件。 它的工作原理不管Ajax调用从模式或从页面的不同部分来了。

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

由于@BillHuertas为出发点。

Answer 13:

另一种可能的错误，可能会产生这个问题，

确保你没有包括bootstrap.js脚本不止一次在您的网页！

Answer 14:

UpdatePanel的问题。

我的问题是由于在UpdatePanel位置。 我曾在UpdatePanel的整个模式。 如果声明的模式在UpdatePanel外，只是有发言权，模态的身体，在更新面板，那么$（“＃myModalID”）模态（“隐藏”）。 工作。

Answer 15:

换个角度来看这个问题。 （我使用的版本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作为展现在引导文档。

因此，解决我的问题是只在手动javascript和未初始化模式使用数据属性，这样我既可以手动关闭模式，并通过使用data-dismiss="modal"的特点。

希望这会帮助，如果你遇到了同样的问题，因为我。

Answer 16:

$（ '＃myModal'）触发器（ '点击'）;

这为我工作。 它不关闭，因为当你打开弹出它触发2或3模式，背景。 所以，当你做$（ '＃myModal'））模式（ '隐藏'）。 它仅仅影响一个模态，背景和其他部分保持。

Answer 17:

FYI万一有人运行到这个还是......我花了大约3个小时发现，最好的方式做到这一点如下：

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

这个功能关闭模式非常直观。

Answer 18:

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

Answer 19:

请确保您使用的不是同一个元素ID /类的其他地方，对无关的模态分量的元素。

这是..如果你确定你的按钮触发其使用类名的模态弹出窗口“myModal”，确保不存在具有相同的类名没有无关的元素。

Answer 20:

添加data-dismiss="modal"在我的模式为我工作的任何按钮。 我希望我的按钮来调用一个函数的角度来触发一个Ajax调用和关闭模式，所以我加了.toggle()函数中，效果不错。 （在我的情况下，我使用的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 })
}

Answer 21:

试图提交表单的时候我有同样的问题。 解决的办法是改变按钮类型，从submit到button ，然后处理按钮单击事件，如下所示：

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

Answer 22:

在.NET MVC4项目，我必须模态弹出（引导3.0）的Ajax.BeginForm里面（的onComplete =“addComplete” [额外的代码删除]）。 Javascript中我有下面的代码“addComplete”。 这解决了我的问题。

$（ '＃moreLotDPModal'）隐藏（）。

$（ “＃moreLotDPModal”）数据（ 'bs.modal'）被示=假。;

$（ '主体'）removeClass（ '模式开'）。

$（“模式，背景”）删除（）;

$（ '＃moreLotDPModal'）removeClass（ “中”）。

$（ '＃moreLotDPModal'）ATTR（ '咏叹调隐'， “真”）。

Answer 23:

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

两者都使用了类“关闭”。 改变类中的一个或另一个修复了这个。

Answer 24:

我有这个同样的问题。

不过我用bootbox.js，所以它可能是事做这一点。

无论哪种方式，我意识到这个问题正在由具有作为它的父同一类的元素引起的。 当这些元件中的一个被用于结合的点击功能，以显示模式，则发生该问题。

即，这是什么原因造成的问题：

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

改变它，这样被点击的元素不具有相同的类，因为它的母公司，它的任何的孩子，或任何其他的祖先。 这也可能是很好的做法普遍约束力的点击功能时，要做到这一点。

Answer 25:

我与流星工作，我刚刚得到了同样的问题。 我错误的原因是这样的：

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

正如你可以看到我添加的其他模态，所以当我的模式更新contactinformation的，如果有另一种状态。 这导致被排除在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}}

Answer 26:

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

Answer 27:

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

“静”，“真”，“假”。

静态和真正添加模式的影子，而假禁用的影子，所以你只需要与第一次点击虚假更改此值。 像这样：

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

Answer 28:

我有模态背景画面冻结的问题，但略有不同的场景：当正在显示2背靠背情态动词。 例如，第一个将要求确认做些什么，并点击“确认”按钮后，该行动将遇到一个错误，第二个模式是要显示弹出错误信息。 第2模态背景将定格画面。 有在类名或元素的ID没有发生冲突。

问题得到了解决的方式是给浏览器足够的时间来应对模式的背景。 而不是立即采取行动的“确认”被点击后，给浏览器说500ms的隐藏第一模式和清理的背景下等 - 然后采取这将在显示错误模式结束的动作。

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

我猜其他的解决方案工作，因为他们采取了足够的额外时间给浏览器所需要的时间清理。

Answer 29:

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

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

Answer 30:

从https://github.com/twbs/bootstrap/issues/19385

莫代尔的显示/隐藏方法是异步的。 因此，这样的代码：

foo.modal("hide"); bar.modal("show"); 是无效的。 你需要等待显示/隐藏实际完成（通过侦听显示/隐藏事件看http://getbootstrap.com/javascript/#modals-events调用演出前或再次隐藏方法）。

我有这个问题时，我太快打开了同一个模式的两倍，因此一个简单的办法是检查它是否已经显示，然后再显示它：

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

文章来源: Twitter bootstrap modal-backdrop doesn't disappear