¿Cómo aumento el ancho modal en Angular UI Bootstrap?

Solución:

Utilizo una clase css como esa para apuntar a la clase de diálogo modal:

.app-modal-window .modal-dialog {
  width: 500px;
}

Luego, en el controlador que llama a la ventana modal, configure windowClass:

    $scope.modalButtonClick = function () {
        var modalInstance = $modal.open({
            templateUrl: 'App/Views/modalView.html',
            controller: 'modalController',
            windowClass: 'app-modal-window'
        });
        modalInstance.result.then(
            //close
            function (result) {
                var a = result;
            },
            //dismiss
            function (result) {
                var a = result;
            });
    };

Otra forma fácil es usar 2 tamaños prefabricados y pasarlos como parámetro al llamar a la función en su html. use: ‘lg’ para modales grandes con ancho de 900px ‘sm’ para modales pequeños con ancho de 300px o sin pasar ningún parámetro, usa el tamaño predeterminado que es 600px.

código de ejemplo:

$scope.openModal = function (size) {
var modal = $modal.open({
                templateUrl: "/partials/welcome",
                controller: "welcomeCtrl",
                backdrop: "static",
                scope: $scope,
                size: size,
            });
modal.result.then(
        //close
        function (result) {
            var a = result;
        },
        //dismiss
        function (result) {
            var a = result;
        });
};

y en el html usaría algo como lo siguiente:

<button ng-click="openModal('lg')">open Modal</button>  

Puede especificar un ancho personalizado para la clase .modal-lg específicamente para su ventana emergente para una resolución de ventana más amplia. Así es como se hace:

CSS:

@media (min-width: 1400px){

   .my-modal-popup .modal-lg {
       width: 1308px;
   }       

}

JS:

var modal = $modal.open({
    animation: true,
    templateUrl: 'modalTemplate.html',
    controller: 'modalController',
    size: 'lg',
    windowClass: 'my-modal-popup'
});

---

---

Utiliza Nuestro Buscador