Comment augmenter la largeur modale dans Bootstrap d’interface utilisateur angular?

Je crée un modal:

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

y a-t-il un moyen d’augmenter sa largeur?

J’utilise une classe css comme telle pour cibler la classe de dialog modal:

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

Puis, dans le contrôleur appelant la fenêtre modale, définissez la fenêtreClass:

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

Un autre moyen simple consiste à utiliser 2 tailles prédéfinies et à les passer en paramètre lors de l’appel de la fonction dans votre code HTML. utilisez: ‘lg’ pour les grands modaux de largeur 900px ‘sm’ pour les petits modaux de largeur 300px ou ne passant aucun paramètre, vous utilisez la taille par défaut qui est 600px.

exemple de code:

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

et dans le HTML j’utiliserais quelque chose comme ce qui suit:

  

Vous pouvez spécifier une largeur personnalisée pour la classe .modal-lg spécifiquement pour votre popup pour une résolution de fenêtre plus large. Voici comment faire:

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

Lorsque nous ouvrons un modal, il accepte la taille en tant que paramètre:

Valeurs possibles pour cette taille: sm, md, lg

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

HTML:

    

Si vous souhaitez une taille spécifique, ajoutez du style au modèle HTML:

  

il y a une autre façon dont vous n’avez pas besoin d’écraser les classes uibModal et de les utiliser si nécessaire: vous appelez la fonction $ uibModal.open avec votre propre type de taille comme “xlg” et vous définissez ensuite une classe nommée “modal-xlg” :

 .modal-xlg{ width:1200px; } 

appelez $ uibModal.open comme:

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

et cela fonctionnera. car quelle que soit la chaîne que vous passez en taille, le bootstrap le coïncidera avec “modal-” et cela jouera le rôle de classe pour la fenêtre.

J’ai trouvé plus facile de reprendre le modèle de Bootstrap-ui. J’ai laissé le HTML commenté en place pour montrer ce que j’ai changé.

Remplacez leur modèle par défaut:

  

Modifiez votre modèle de boîte de dialog (notez les enveloppes DIV contenant la classe “modal-dialog” et la classe “modal-content”):

  

Et puis appelez le modal avec les parameters de classe ou de style CSS que vous souhaitez modifier (en supposant que vous avez déjà défini “app” ailleurs):

  

Ajouter un bouton “Ouvrir” et déclencher.

   

Vous pouvez maintenant append la classe de votre choix ou simplement modifier la taille de la largeur / hauteur si nécessaire.

Je l’ai ensuite inclus dans une directive wrapper, ce qui devrait être sortingvial à partir de maintenant.

À votre santé.

J’ai résolu le problème en utilisant la solution Dmitry Komin, mais avec une syntaxe CSS différente pour le faire fonctionner directement dans le navigateur.

CSS

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

JS est le même:

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

Vous pouvez le faire de manière très simple en utilisant la propriété de taille du 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 vous voulez simplement utiliser la grande taille par défaut, vous pouvez append «modal-lg»:

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

Utilisez max-width sur modal-dialog pour angular 5

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

et utilisez windowClass comme d’autres recommandé, par exemple:

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

De plus, j’ai dû mettre le code CSS dans les styles globaux> styles.css.