web-dev-qa-db-fra.com

AngularJS modal bootstrap.ui ne s'affiche pas

J'essaie d'afficher une boîte de dialogue modale à l'aide de AngularJS bootstrap.ui. Lorsque je fais un $ modal.open (...), l'écran est grisé et le code HTML de mon templateUrl est appelé depuis le serveur, mais aucun affichage modal. Lorsque je clique sur la zone grise, le modal "se ferme", c’est-à-dire que la zone grise s’éloigne et que l’écran redevient normal. Je n'arrive pas à comprendre pourquoi je ne vois aucun écran modal.

J'essaie de suivre ce tutoriel: Directives angulaires

J'utilise Visual Studio 2013, MVC 5, AngularJS 1.2.2.

J'utilise bootstrap.css fourni avec le projet VS. Il contient les classes modales. Je ne reçois aucune erreur signalée par la console Javascript. Mon application est définie comme suit:

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();
    };
}

Et mon balisage est:

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

Une idée de la raison pour laquelle mon écran passe au gris, la ressource/Privacy commence à être chargée et l'écran redevient normal lorsque l'utilisateur clique sur le gris, mais aucun modal n'apparaît?

javascriptangularjstwitter-bootstrap
21
Steve

Ont exactement les mêmes symptômes tout à l'heure. Ne vous souvenez pas des détails exacts, mais je pense que le problème principal est que l'instance du modal a toujours display:none.

  1. Assurez-vous que vous utilisez le ui-bootstrap avec des modèles (ui-bootstrap-tpls.js) - comme vous le feriez probablement avec l'effet de grisonnement.
  2. Dans ui-bootstrap-tpls.js, accédez au modèle modal tout en bas (vous pouvez le trouver par: "template/modal/window.html") et ajoutez-y style="display:block". If it will not help try to match css classes of the template against yourbootstrap.css`.

Personnellement, j'ai utilisé une version personnalisée de bootstrap3, et j'en ai maintenant un modèle:

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>");
}]);

EDITVous pouvez facilement supprimer de votre bootstrap.css tous les styles de la classe modal (et ses sous-classes) où display est défini sur none - bootstrap masque uniquement l'élément DOM, alors que ui-bootstrap le supprime complètement.

17
artur grzesiak

J'ai eu exactement le même problème. Ce que j'ai fait pour résoudre ce problème a été de changer ce que j'avais dans mon template.html, le fichier .html fourni avec la propriété templateUrl dans la fonction ouverte.

J'ai eu le balisage modal complet ici: 

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

Quand j'ai enlevé les trois premiers divs et qu'il ne restait que And here some modal markup dans le template.html, cela a bien fonctionné!

17
Gustav

Ceci est une incompatibilité avec ui.bootstrap et bootstrap 3.0. 

Il vous suffit de mettre dans votre css:

.modal {
display: block;
}

Vous pouvez voir ce post pour plus de détails: AngularJs avec UI-Bootstrap: Correction des boîtes de dialogue brisées .

17
Sergio M C Figueiredo

Le problème pour moi (développer sous Visual Studio avec Bootstrap 4) était que la classe de bootstrap .fade:not(.show) définit opacity: 0. En utilisant l'inspecteur de code pour désactiver cette classe, je pouvais voir que le modal montrerait.

Cependant, afin d'éviter de modifier les fichiers des fournisseurs (à savoir le fichier bootstrap.css), j'ai simplement étendu la fonction qui appelle le modal pour ajouter la classe 'show' à la page modale. Dans votre exemple, cela serait comme suit:

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

Normalement, l'ajout de la classe show à la totalité de la fenêtre signifierait que le modal est affiché en permanence. Ce n'est pas un problème lorsque les pages sont chargées dynamiquement, car l'élément entier de la classe .show est supprimé lorsque l'utilisateur s'éloigne du modal, indépendamment de l'existence de cette classe.

3
Joshua Flood

Pour une raison étrange, la hauteur de fond du modal n'est pas définie pour remplir la fenêtre. Pour corriger cela dans ui-bootstrap-tpls.js, je suis allé à la ligne template/modal/backdrop.html en bas et j'ai ajouté ce qui suit aux options de style 'width':'100%', 'height':'100%'

0
Daniel Barde

Je suis passé à bootstrap v3.3.4 et maintenant ça marche pour moi.

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

Dans mon cas, le problème était que bower installait bootstrap 4 et que l'interface ui-modal prend en charge la version 3.3.7; vous devez donc vérifier la version de bootstrap sur bower_components.

0
Jonathan Sánchez