嵌套的UI引导情态动词，缺少背景 [英] nested ui bootstrap modals, missing backdrop
问题描述
在我的应用程序打开两个情态动词，一个在另一个之内。这两种情态动词有背景：静态属性。
我第一次打开这两个模态一切都很好，但是当我关闭它们，然后再次打开两个，第二个模式将失去其背景，或至少背景不会褪色。
我会尽量在plunkr重现此问题，但我是新来的，所以我想我会看，如果这是一个已知的问题，或者如果任何人有一个qlue的问题可能是什么，任何人？
更新好了，所以我创建了一个 -plunker-与我的问题的，因为我创造这个plunker我意识到这个问题是我的信息模式/工厂。
我要求的一些数据从服务器，这是模拟与的setTimeout 功能。当正在加载的数据，将显示一个信息模式，这是之前的第一个嵌套的情态动词的开闭，但我仍然认为这个人是这个问题。
若要重现该问题：
preSS'打开了我！到加载的数据，并打开第一模态。然后preSS的'你好'文本打开第二个模式。
注意，这是应该的，无论是情态动词有正确的背景下褪色。
关闭这两个情态动词，并再次打开他们，这时候你会看到第二个模式已经失去了它的背景。
我希望这有助于你我的朋友
angular.module（应用程序，[]）;\r
angular.module（应用程序）。控制器（CTRL功能（$范围）{\r
$ scope.openModals =功能（）{\r
$（＃myModal1）模式（秀）。\r
$（＃myModal2）模式（秀）。\r
}\r
\r
$ scope.openModal_1 =功能（）{\r
$（＃myModal1）模式（秀）。\r
}\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序NG控制器=CTRL＆GT;\r
＆LT; HEAD＆GT;\r
＆LT;链接HREF =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆LT; /头＆GT;\r
＆LT;身体GT;\r
\r
＆LT;按钮NG点击=openModals（）＆GT;打开这两个模式下及/按钮＆GT;\r
＆LT;按钮NG点击=openModal_1（）＆GT;开放模式1，然后模态2'，/按钮＆GT;\r
\r
＆LT;！ - 模态 - ＆GT;\r
＆LT; DIV CLASS =模式变脸ID =myModal1的tabindex = - 1角色=对话＆GT;\r
＆LT; DIV CLASS =模式，对话框的角色=文件＆GT;\r
＆LT; DIV CLASS =模式内容＆GT;\r
＆LT; DIV CLASS =模头＆GT;\r
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA标签=关闭＆GT;＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT; ＆LT; /按钮＆GT;\r
＆LT; H4类=模式标题＆GT;模态题1 LT; / H4＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =模体＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-主要BTN-LG数据切换=莫代尔数据目标=＃myModal2＆GT;\r
启动模式2\r
＆LT; /按钮＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =模式躯＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-默认的数据驳回=模式＆GT;关闭＆LT; /按钮＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-小学＆GT;保存更改LT; /按钮＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;！ - 模态 - ＆GT;\r
＆LT; DIV CLASS =模式变脸ID =myModal2的tabindex = - 1角色=对话＆GT;\r
＆LT; DIV CLASS =模式，对话框的角色=文件＆GT;\r
＆LT; DIV CLASS =模式内容＆GT;\r
＆LT; DIV CLASS =模头＆GT;\r
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA标签=关闭＆GT;＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT; ＆LT; /按钮＆GT;\r
＆LT; H4类=模式标题＆GT;模态题2'; / H4＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =模体＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =模式躯＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-默认的数据驳回=模式＆GT;关闭＆LT; /按钮＆GT;\r
＆LT;按钮式=按钮级=BTN BTN-小学＆GT;保存更改LT; /按钮＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.11.3.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js＆GT;＆下; /脚本＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
In my application I open two modals, one within the other. Both modals have the backdrop: 'static' property.
The first time I open both modals all is fine, but when I close them and then opens both again, the second modal will lose its backdrop, or atleast the background won't fade.
I will try and reproduce this problem in a plunkr, but I am new to those so I thought I'd see if this is a know issue, or if anyone has a qlue to what the problem can be, anyone?
Update Okay, so I created a -plunker- with my problem, as I was creating this plunker I realized that the problem is with my info modal/factory.
I request some data from a server, this is simulated with a setTimeout function. While the data is being loaded, an information modal is displayed, this is closed before the first of the nested modals open, but I still think this one is the problem.
To reproduce the problem:
Press 'Open me!' to "load" the data, and open the first modal. Then press the 'hello' text to open the second modal.
Note that this is how it should be, both modals have the correct backdrop fade.
Close both modals and open them again, this time you'll see that the second modal has lost its backdrop.
I hope this helps you my friend
angular.module("app", []);
angular.module("app").controller("ctrl", function ($scope) {
$scope.openModals = function() {
$("#myModal1").modal("show");
$("#myModal2").modal("show");
}
$scope.openModal_1 = function () {
$("#myModal1").modal("show");
}
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<button ng-click="openModals()">open both modal</button>
<button ng-click="openModal_1()">open modal 1 and then modal 2</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title 1</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Launch modal 2
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title 2</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</body>
</html>
这篇关于嵌套的UI引导情态动词，缺少背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
