javascript - ventana - AngularJS bootstrap.ui modal no se muestra

ui bootstrap modals

Question

Estoy tratando de mostrar un diálogo modal utilizando AngularJS bootstrap.ui. Cuando hago un $ modal.open (...), la pantalla se apaga y el HTML de mi plantilla se llama desde el servidor, pero no se muestra ningún modal. Cuando hago clic en el área gris, el modal se "cierra", es decir, el área gris desaparece y la pantalla se ve normal nuevamente. No puedo entender por qué no veo ninguna pantalla modal.

Estoy tratando de seguir este tutorial: directivas angulares

Estoy usando Visual Studio 2013, MVC 5, AngularJS 1.2.2.

Estoy usando bootstrap.css que viene con el proyecto VS. Tiene las clases modales en ella. No estoy recibiendo ningún error reportado desde la consola de Javascript. Mi aplicación se define de la siguiente manera:

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

Y mi marcado es:

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

¿Alguna idea de por qué mi pantalla está en gris, el recurso / Privacy se está cargando y la pantalla vuelve a la normalidad cuando se hace clic en el gris, pero no aparece ningún modal?

Answer 1

Actualicé a bootstrap v3.3.4 y ahora funciona para mí.

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

Answer 2

El problema para mí (desarrollar con Visual Studio usando bootstrap 4) fue que la clase bootstrap .fade:not(.show) define la opacity: 0 . Usando el inspector de código para deshabilitar esta clase, pude ver que se mostraría el modal.

Sin embargo, para evitar la modificación de los archivos del proveedor (es decir, el archivo bootstrap.css ), simplemente extendí la función que llama al modal para agregar la clase ''show'' a la página modal. En tu ejemplo, esto sería como sigue:

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

Normalmente, agregar la clase show a toda la ventana significaría que el modal se muestra continuamente. Esto no es un problema cuando las páginas se cargan dinámicamente porque el elemento completo con la clase .show se elimina cuando el usuario hace clic fuera del modal, independientemente de la existencia de esta clase.

Answer 3

En mi caso, el problema fue que Bower estaba instalando bootstrap 4 y ui-modal es compatible con 3.3.7, por lo que necesita verificar la versión de bootstrap en bower_components

Answer 4

Esta es una incompatibilidad con ui.bootstrap y bootstrap 3.0.

Solo necesitas poner en tu css:

.modal {
display: block;
}

Puedes ver esta publicación para más detalles: AngularJs with UI-Bootstrap: arregla los cuadros de diálogo rotos .

Answer 5

Por alguna extraña razón, la altura del fondo modal no está configurada para llenar la ventana, para solucionar este problema en ui-bootstrap-tpls.js fui a la línea de template/modal/backdrop.html y agregué lo siguiente al estilo opciones ''width'':''100%'', ''height'':''100%''

Answer 6

Tienen exactamente los mismos síntomas que hace tiempo. No recuerdo los detalles exactos, pero creo que el problema principal fue que la instancia del modal siempre se display:none .

1. Asegúrese de que está utilizando el ui-bootstrap con las plantillas ( ui-bootstrap-tpls.js ), ya que es probable que se ui-bootstrap-tpls.js .
2. En ui-bootstrap-tpls.js vaya a la plantilla modal en la parte inferior (la puede encontrar en "template / modal / window.html") y agregue style="display:block". If it will not help try to match css classes of the template against your style="display:block". If it will not help try to match css classes of the template against your bootstrap.css`.

Personalmente utilicé una versión personalizada de bootstrap3 , y ahora tengo estas plantillas:

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

EDITAR Puede eliminar fácilmente de su bootstrap.css todos los estilos en la clase modal (y sus subclases) donde la display está establecida, bootstrap solo oculta el elemento DOM, mientras que ui-bootstrap elimina por completo.

Answer 7

Yo tuve exactamente el mismo problema. Lo que hice para solucionarlo fue cambiar lo que tenía en mi template.html, el .html provisto con la propiedad templateUrl en la función open.

Yo tenía el total de marcado modal allí:

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

Cuando quité los primeros tres divs y solo tenía And here some modal markup quedaron And here some modal markup en el template.html ¡funcionó bien!