我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
我正在使用Twitter引导模态对话框。当我点击引导模式对话框的提交按钮时,它会发送一个AJAX请求。我的问题是情态背景并没有消失。模态对话框确实消失了,但是“模态背景”在屏幕上创建的不透明度仍然存在
我该怎么办?
当前回答
数据背景属性的初始值可以是
“静态”、“真”、“假”。
Static和true添加模态阴影,而false禁用阴影,所以你只需要在第一次点击时将这个值更改为false。是这样的:
$(文档)。(“准备好”,函数(){ var计算= 0; $ (' # id-which-triggers-modal ')。(“点击”,函数(){ 如果(数> 0){ (美元).attr(“data-backdrop”,“假”) } 数+ +; }); });
其他回答
在动作按钮中插入:
data-backdrop="false"
and
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>
如果你输入这个data-attr, .modal- background将不会出现。 关于它的文档在这个链接:http://getbootstrap.com/javascript/#modals-usage
另一个可能导致这个问题的错误,
确保你没有在页面中不止一次地包含bootstrap.js脚本!
这个问题的另一个观点。 (我使用bootstrap.js 3.3.6版本)
我错误地在javascript中手动初始化模态:
$('#myModal').modal({
keyboard: false
})
通过使用
模态数据-toggle = " "
在下面这个类似按钮的例子中(在文档中显示)
<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的主体。这可能是使用function关闭模态时的原因:
$('#myModal').modal('hide');
它只删除一个背景实例(如上所示),所以背景不会消失。但如果你使用data-dismiss="modal"在html上添加,它就会消失,就像bootstrap doc中显示的那样。
所以我的问题的解决方案是只初始化模式手动在javascript和不使用数据属性,这样我可以关闭模式手动和使用data-dismiss="modal"特性。
如果你遇到和我一样的问题,希望这能对你有所帮助。
在模式中的任何按钮上添加data-dismiss="modal"对我来说都很有效。我想让我的按钮调用angular函数来触发ajax调用并关闭模态,所以我在函数中添加了.toggle(),它工作得很好。(在我的情况下,我使用了一个bootstrap模态和使用一些角,而不是一个实际的模态控制器)。
<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 })
}
我正在和流星一起工作,我也遇到了同样的问题。我的bug的原因是:
{{#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}}