AngularJS bootstrap.ui modal이 표시되지 않습니다.

AngularJS bootstrap.ui modal이 표시되지 않습니다.

Angular(각도)를 사용하여 모달 대화 상자를 표시하려고 합니다.JS bootstrap.ui.$modal.open(...)을 수행하면 화면이 회색으로 변하고 서버에서 템플릿Url의 html이 호출되지만 modal이 표시되지 않습니다.회색 영역을 클릭하면 모드가 "닫힌다", 즉 회색 영역이 사라지고 화면이 다시 정상으로 보입니다.왜 모달 화면이 보이지 않는지 알 수가 없습니다.

이 자습서를 따르려고 합니다.각 지시어

저는 Visual Studio 2013, MVC 5, AngularJS 1.2.2를 사용하고 있습니다.

VS 프로젝트와 함께 제공되는 bootstrap.css를 사용하고 있습니다.모달 클래스가 들어있습니다.자바스크립트 콘솔에서 에러가 보고되지 않습니다.내 앱은 다음과 같이 정의됩니다.

var blogApp = angular.module('blogApp', ['ngResource', 'ngSanitize', 'ui.bootstrap']) ...

blogApp.controller('blogController',
function blogController($scope, $modal, $log, blogData, userData) {

    ...

    $scope.showPrivacy = function() {
        $modal.open({
            templateUrl: '/Privacy',
            controller: 'PrivacyInstanceController'
        });
        return false;
    };
});


var PrivacyInstanceController = function($scope, $modalInstance) {
    $scope.close = function() {
        $modalInstance.close();
    };
}

마크업은 다음과 같습니다.

<div ng-controller="blogController">
        <a ng-click="showPrivacy()">Privacy Policy</a>
    </div>

회색을 클릭하면 화면이 회색으로 변하고 /Privacy 리소스가 로드되고 화면이 정상으로 돌아가지만 모드가 나타나지 않는 이유가 있습니까?

이는 ui.bootstrap 및 bootstrap 3.0과 호환되지 않습니다.

CSS를 입력하기만 하면 됩니다.

.modal {
display: block;
}

자세한 내용은 이 게시물에서 확인할 수 있습니다.UI-Bootstrap을 사용한 AngularJs: 깨진 대화 상자를 수정합니다.

저도 똑같은 문제가 있었습니다.을 고치기 한은 내 .html은 .html되는 .html다와 .templateUrl개방 기능의 재산

거기에 전체 모달마크를 달았습니다.

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">And here some modal markup</div></div></div>

세 명의 하고 만 했을 때.And here some modal markup템플릿에 남겼습니다. html 잘 작동했습니다!

조금 전에도 똑같은 증상이 있었습니다.제큰의 예는 항상만, 있다는 입니다.display:none.

1. 합니다를 합니다.ui-bootstrap함()ui-bootstrap-tpls.js) -- 입니다합니다.
2. ui-bootstrap-tpls.jsmodal맨 lelwl"다를 합니다.style="display:block". If it will not help try to match css classes of the template against your부트스트랩, css'

으로 했습니다의 을 사용했습니다.bootstrap3할 수 ..

angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/backdrop.html",
    "<div class=\"modal-backdrop fade\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1040 + index*10}\" ng-click=\"close($event)\"></div>");
}]);

angular.module("template/modal/window.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/window.html",
    "<div class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" style='display:block;z-index:1050'  ng-transclude></div>");
}]);

편집 - 쉽게 제거할 수 있습니다.bootstrap.cssmodal 그 위 클래스).display로 설정됩니다.none--bootstrapDOM은입니다.ui-bootstrap완전히 제거합니다.

( 4 를)가 였습니다 였습니다..fade:not(.show)정의합니다.opacity: 0. 코드 검사기를 사용하여 이 클래스를 비활성화하면 모드가 표시됨을 알 수 있었습니다.

그러나 벤더 파일(즉,bootstrap.cssfile), modal 페이지에 'show' 클래스를 추가하기 위해 modal을 호출하는 기능을 확장했을 뿐입니다.예를 들어, 이는 다음과 같습니다.

$scope.showPrivacy = function() {
    $modal.open({
        templateUrl: '/Privacy',
        windowClass: 'show',
        controller: 'PrivacyInstanceController'
    });
    return false;
};

일반적으로 전체 창에 show class를 추가하면 modal이 연속적으로 표시됩니다.페이지가 동적으로 로드되는 경우에는 이 문제가 발생하지 않습니다. 왜냐하면 전체 요소가.show클래스가 존재하는지 여부에 관계없이 사용자가 모드에서 멀어지면 클래스가 제거됩니다.

어떤 이상한 이유로 모달의 배경 높이가 창문을 채우지 않고, 이것을 고치기 위해.ui-bootstrap-tpls.js나는 그 곳에 갔습니다.template/modal/backdrop.html하단에 줄을 긋고 스타일 옵션에 다음을 추가합니다.'width':'100%', 'height':'100%'

부트스트랩 v3.3.4로 업그레이드했는데 지금은 잘 되네요.

• Angularjs v1.3.12
• ui-bootstrap-0.12.0
• ui.bootstrap.tpls-0.12.0

제 경우에는 bower가 부트스트랩 4를 설치하고 ui-modal이 3.3.7을 지원하므로 bower_component의 부트스트랩 버전을 확인해야 합니다.

언급URL : https://stackoverflow.com/questions/20255347/angularjs-bootstrap-ui-modal-not-showing