web-dev-qa-db-ja.com

AngularJS bootstrap.uiモーダルが表示されない

AngularJS bootstrap.uiを使用してモーダルダイアログを表示しようとしています。 $ modal.open（...）を実行すると、画面がグレー表示になり、templateUrlのhtmlがサーバーから呼び出されますが、モーダルは表示されません。灰色の領域をクリックすると、モーダルが「閉じ」ます。つまり、灰色の領域が消え、画面が再び正常に見えます。モーダル画面が表示されない理由がわかりません。

私はこのチュートリアルに従うことを試みています： Angular directives

Visual Studio 2013、MVC 5、AngularJS 1.2.2を使用しています。

VSプロジェクトに付属のbootstrap.cssを使用しています。モーダルクラスが含まれています。 Javascriptコンソールからエラーが報告されません。私のアプリは次のように定義されています：

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リソースが読み込まれ、グレーをクリックすると画面が通常に戻りますが、モーダルは表示されません。

javascriptangularjstwitter-bootstrap
21
Steve

前とまったく同じ症状があります。正確な詳細は覚えていませんが、主な問題は、モーダルのインスタンスが常にdisplay:noneを持っていることだと思います。

  1. ui-bootstrapをテンプレートで使用していることを確認してください（ui-bootstrap-tpls.js）-おそらくグレーアウトの影響があるためです。
  2. ui-bootstrap-tpls.jsで、一番下のmodalテンプレートに移動し（「template/modal/window.html」で見つけることができます）、そこにstyle="display:block". If it will not help try to match css classes of the template against yourbootstrap.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>");
}]);

[〜＃〜] edit [〜＃〜]クラスmodal（およびそのサブクラス）のすべてのスタイルをbootstrap.cssから簡単に削除できます。ここで、displayはnoneに設定されます-bootstrapui-bootstrapはDOM要素を完全に削除しますが、DOM要素は非表示にします。

17
artur grzesiak

私はまったく同じ問題を抱えていました。私がそれを修正するために行ったのは、オープン関数のtemplateUrlプロパティで提供される.htmlのtemplate.htmlの内容を変更することでした。

そこに完全なモーダルマークアップがありました：

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

最初の3つのdivを削除して、And here some modal markup template.htmlに残り、うまくいきました！

18
Gustav

これは、ui.bootstrapおよびbootstrap 3.0。との非互換性です。

あなただけのCSSに入れる必要があります：

.modal {
display: block;
}

詳細については、この投稿をご覧ください： AngularJs with UI-Bootstrap：Fix fixed dialog Boxs 。

18
Sergio M C Figueiredo

私にとっての問題（bootstrap 4を使用したVisual Studioでの開発）は、bootstrap class .fade:not(.show)がopacity: 0。コードインスペクターを使用してこのクラスを無効にすると、モーダルが表示されることがわかりました。

ただし、ベンダーファイル（つまり、bootstrap.css file）、モーダルを呼び出す関数を拡張して、モーダルページに「show」クラスを追加しました。あなたの例では、これは次のようになります。

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

通常、ウィンドウ全体にshowクラスを追加すると、モーダルが継続的に表示されます。これは、ページ全体が.showクラスは、このクラスの存在に関係なく、ユーザーがモーダルから離れてクリックすると削除されます。

4
Joshua Flood

何らかの奇妙な理由で、モーダルの背景の高さがウィンドウを埋めるように設定されていないため、ui-bootstrap-tpls.js私はtemplate/modal/backdrop.html行を下部に追加し、スタイルオプションに次を追加しました'width':'100%', 'height':'100%'

0
Daniel Barde

bootstrap= v3.3.4にアップグレードしましたが、現在は動作します。

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

私の場合、問題はbowerがbootstrap 4をインストールしており、ui-modalが3.3.7をサポートしているため、bower_componentsでbootstrapのバージョンを確認する必要がある

0
Jonathan Sánchez