¿Cómo puedo boost el ancho modal en Bootstrap UI angular?

Estoy creando un modal:

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

¿Hay alguna manera de boost su ancho?

Utilizo una clase css como tal 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 grandes modales con ancho 900px ‘sm’ para pequeños modales con ancho 300px o sin pasar ningún parámetro, use 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:

  

Puede especificar el ancho personalizado para la clase .modal-lg específicamente para su ventana emergente para una resolución más amplia de la ventana gráfica. Aquí está 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 un parámetro:

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

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

HTML:

    

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

  

hay otra manera en la que no tiene que sobrescribir las clases de 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 se muestra a continuación :

 .modal-xlg{ width:1200px; } 

llame a $ uibModal.open como:

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

y esto funcionará porque cualquier cadena que pases como bootstrap de tamaño lo consumirá con “modal-” y esto jugará el papel de clase para window.

Me resultó más fácil simplemente tomar el control de la plantilla de Bootstrap-ui. He dejado el HTML comentado todavía en el lugar para mostrar lo que he cambiado.

Sobrescribe su plantilla predeterminada:

  

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

  

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

  

Agregue un botón “abrir” y dispare.

   

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

Lo incluí dentro de una directiva de contenedor, que debe ser trivial a partir de ahora.

Aclamaciones.

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

CSS

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

JS es lo mismo:

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

Puedes hacer esto de una manera muy simple usando la propiedad size of angular modal.

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

Si desea simplemente 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 max-width en modal-dialog 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.