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

我该怎么办?


当前回答

在。net MVC4项目中,我在Ajax中有模态弹出(bootstrap 3.0)。BeginForm(OnComplete = "addComplete"[额外的代码删除])。在“addComplete”javascript中,我有以下代码。这解决了我的问题。

$('#moreLotDPModal').hide(); $(“#moreLotDPModal”).data('bs.modal').isDisplay= false; $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); $('#moreLotDPModal').removeClass(“in”); $('#moreLotDPModal').attr('aria-hidden', “true”);

其他回答

对我来说,最好的答案是。

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

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

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

从这个SO答案

我也有同样的问题。

然而,我使用bootbox.js,所以这可能是与此有关。

不管怎样,我意识到这个问题是由一个元素与它的父类具有相同的类引起的。当其中一个元素被用来绑定一个点击函数来显示模态时,就会出现问题。

这就是问题的原因:

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

更改它,以便被点击的元素不具有与其父类、任何子类或任何其他父类相同的类。通常在绑定单击函数时这样做可能是一个很好的实践。

另一个可能导致这个问题的错误,

确保你没有在页面中不止一次地包含bootstrap.js脚本!

我有模态背景屏幕冻结的问题,但在一个略有不同的场景:当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);

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

甚至我也遇到了类似的问题,我有以下两个按钮

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

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