我在我的一个 View 中使用 iu.bootstrap.modal 弹出窗口。模态窗口正确显示,只是它看起来像是在一个较大的白色框架内。
是什么导致这个白框出现在我的模态窗口后面?
这是我的看法:
<button type="button" id="btnModal" name="modal1" ng-click="openModal()" class="btn btn-primary pull-right">Open Modal</button>
<!--Modal-->
<script type="text/ng-template" id="myModal.html">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<span id="error-message" class="text-danger" style="white-space:pre">{{message}}</span>
</div>
<div class="modal-footer">
<button id="btn-ok" class="btn btn-primary" type="button" ng-click="ok()">OK</button>
</div>
</div>
</script>
还有我的 Controller
$scope.openModal = function () {
var title = "Modal Title";
var message = "Modal Message";
var modalInstance = $uibModal.open ({
animation: true,
templateUrl: 'myModal.html',
size: 'sm',
controller: function ($scope) {
$scope.title = title;
$scope.message = message;
$scope.ok = function () { modalInstance.dismiss() };
}
});
};
是什么导致窗口出现在模式后面?
最佳答案
在 ui.bootstrap 文档中(https://angular-ui.github.io/bootstrap/#/modal)
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<ul>
<li ng-repeat="item in $ctrl.items">
<a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ $ctrl.selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
没有 <div>
的 modal-content
类(class)。但是你在模态的开头。 modal-content
是一个 css Bootstrap 类,它可能会导致问题。
关于angularjs - 模态窗口有大背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40549362/