example - modal bootstrap angularjs

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

Question

Estoy creando un modal:

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

¿Hay alguna manera de aumentar su ancho?

Answer 1

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

Answer 2

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:

<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>

Answer 3

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:

<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 contendores DIV 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 de CSS o parámetros de estilo que desee cambiar (suponiendo que ya haya definido la "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>

Agregue un botón "abrir" y dispare.

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

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.

Answer 4

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:

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

Answer 5

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:

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

JS:

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

Answer 6

Resolví el problema usando la solución de Dmitry Komin, pero con una sintaxis 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''
});

Answer 7

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

Answer 8

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

Answer 9

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.