2
내보기 중 하나에서 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>
그리고 내 컨트롤러
$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
클래스의 존재에
나는 CSS가 부트 스트랩 CSS를 무시한다고 생각합니다. '모달 백 드롭'클래스에이 스타일이 background-color인지 확인하십시오. # 000; . 더 나은 이해를 위해 plunkr 또는 jsfiddle을 제공하십시오. –
정확합니다. 문제를 일으키는 CSS가 있습니다. 나는 그것을 index.html에서 주석 처리했으며 이제 모달이 올바르게 나타납니다. – Jerry
위대한 @ 제리 ... –