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

Estoy creando un modal:

var modal = $modal.open({
                    templateUrl: "/partials/welcome",
                    controller: "welcomeCtrl",
                    backdrop: "static",
                    scope: $scope,
                });

¿Hay alguna forma de aumentar su ancho?

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. He aquí cómo hacerlo:

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

Cuando abrimos un modal, acepta el tamaño como parámetro:

Valores posibles para su tamaño: sm, md, lg

$scope.openModal = function (size) {
var modal = $modal.open({
      size: size,
      templateUrl: "/app/user/welcome.html",
      ...... 
      });
}

HTML:

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('sm')">Small Modal</button>

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('md')">Medium Modal</button>

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('lg')">Large Modal</button>

Si desea un tamaño específico, agregue estilo en el modelo HTML:

<style>.modal-dialog {width: 500px;} </style>

hay otra forma en la que no tiene que sobrescribir las clases uibModal y usarlas si es necesario: llama a la función $ uibModal.open con su propio tipo de tamaño como "xlg" y luego define una clase llamada "modal-xlg" como a continuación :

.modal-xlg{
   width:1200px;
}

llamar a $ uibModal.open como:

 var modalInstance = $uibModal.open({
                ...  
                size: "xlg",
            });

y esto funcionará. porque cualquier cadena que pase como tamaño de bootstrap la combinará con "modal-" y esto jugará el papel de clase para ventana.

Me resultó más fácil tomar el control de la plantilla de Bootstrap-ui. Dejé el HTML comentado todavía en su lugar para mostrar lo que cambié.

Sobrescriba su plantilla predeterminada:

<script type="text/ng-template" id="myDlgTemplateWrapper.html">
    <div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" 
         ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)"> 
        <!-- <div class="modal-dialog"
            ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"
            >
            <div class="modal-content"  modal-transclude></div>
        </div>--> 

        <div modal-transclude>
            <!-- Your content goes here -->
        </div>
    </div>
</script>

Modifique su plantilla de diálogo (tenga en cuenta los DIV de contenedor que contienen la clase "modal-dialog" y la clase "modal-content"):

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-dialog {{extraDlgClass}}"
         style="width: {{width}}; max-width: {{maxWidth}}; min-width: {{minWidth}}; ">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h3>I am a more flexible modal!</h3>
            </div>
            <div class="modal-body"
                 style="min-height: {{minHeight}}; height: {{height}}; max-height {{maxHeight}}; ">
                <p>Make me any size you want</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </div>
</script>

Y luego llame al modal con cualquier clase CSS o parámetros de estilo que desee cambiar (suponiendo que ya haya definido "aplicación" en otro lugar):

<script type="text/javascript">
    app.controller("myTest", ["$scope", "$modal", function ($scope, $modal)
    {
        //  Adjust these with your parameters as needed

        $scope.extraDlgClass = undefined;

        $scope.width = "70%";
        $scope.height = "200px";
        $scope.maxWidth = undefined;
        $scope.maxHeight = undefined;
        $scope.minWidth = undefined;
        $scope.minHeight = undefined;

        $scope.open = function ()
        {
            $scope.modalInstance = $modal.open(
            {
                backdrop: 'static',
                keyboard: false,
                modalFade: true,

                templateUrl: "myModalContent.html",
                windowTemplateUrl: "myDlgTemplateWrapper.html",
                scope: $scope,
                //size: size,   - overwritten by the extraDlgClass below (use 'modal-lg' or 'modal-sm' if desired)

                extraDlgClass: $scope.extraDlgClass,

                width: $scope.width,
                height: $scope.height,
                maxWidth: $scope.maxWidth,
                maxHeight: $scope.maxHeight,
                minWidth: $scope.minWidth,
                minHeight: $scope.minHeight
            });

            $scope.modalInstance.result.then(function ()
            {
                console.log('Modal closed at: ' + new Date());
            },
            function ()
            {
                console.log('Modal dismissed at: ' + new Date());
            });
        };

        $scope.ok = function ($event)
        {
            if ($event)
                $event.preventDefault();
            $scope.modalInstance.close("OK");
        };

        $scope.cancel = function ($event)
        {
            if ($event)
                $event.preventDefault();
            $scope.modalInstance.dismiss('cancel');
        };

        $scope.openFlexModal = function ()
        {
            $scope.open();
        }

    }]);
</script>

Agrega un botón de "abrir" y dispara.

    <button ng-controller="myTest" class="btn btn-default" type="button" ng-click="openFlexModal();">Open Flex Modal!</button>

Ahora puede agregar cualquier clase adicional que desee, o simplemente cambiar los tamaños de ancho / alto según sea necesario.

Lo incluí además en una directiva de envoltura, que debería ser trivial de ahora en adelante.

Salud.

Resolví el problema usando la solución Dmitry Komin, pero con una sintaxis CSS diferente para que funcione directamente en el navegador.

CSS

@media(min-width: 1400px){
    .my-modal > .modal-lg {
        width: 1308px;
    }
}

JS es el mismo:

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

Puede hacer esto de una manera muy simple usando la propiedad de tamaño del modal angular.

var modal = $modal.open({
                    templateUrl: "/partials/welcome",
                    controller: "welcomeCtrl",
                    backdrop: "static",
                    scope: $scope,
                    size:'lg' // you can try different width like 'sm', 'md'
                });

Si solo desea ir con el tamaño grande predeterminado, puede agregar 'modal-lg':

var modal = $modal.open({
          templateUrl: "/partials/welcome",
          controller: "welcomeCtrl",
          backdrop: "static",
          scope: $scope,
          windowClass: 'modal-lg'
});

Use el ancho máximo en el diálogo modal para angular 5

.mod-class .modal-dialog {
    max-width: 1000px;
}

y use windowClass como otros recomiendan, TS, por ejemplo:

this.modalService.open(content, { windowClass: 'mod-class' }).result.then(
        (result) => {
            // this.closeResult = `Closed with: ${result}`;
         }, (reason) => {
            // this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

Además, tuve que poner el código css en estilos globales> styles.css.