E 'possibile dare la dimensione del modale nelle opzioni

Question

Sto usando il modal bootstrap per mostrare i messaggi.

var options = { 
      backdrop: false, 
      keyboard: true, 
      backdropClick: false, 
      templateUrl: 'a.html', 
      controller: 'aController', 
     }; 
var modalInstance = $modal.open(options); 

E 'possibile fornire le proprietà di stile larghezza e altezza personalizzate.

Answer 1

Sì, è possibile fornire un valore di chiave size (sm, md, lg) che interpola a .modal-sm, .modal-md and .modal-lg.

Come indicato nel angular-bootstrap documentation:

dimensioni - formato facoltativo della finestra modale. Valori consentiti: 'sm' (piccolo) o 'lg' (grande). Richiede Bootstrap 3.1.0 o successive

Javascript

var options = { 
      backdrop: false, 
      keyboard: true, 
      backdropClick: false, 
      templateUrl: 'a.html', 
      controller: 'aController', 
      size: 'lg' // sm, md, lg 
}; 
var modalInstance = $modal.open(options); 

Se non siete soddisfatti con la dimensione fornita da questi valori, allora hai due opzioni:

[] Aggiungi una classe alla finestra modale di livello superiore utilizzando l'attributo windowClass e quindi utilizza questa classe per modificare i rispettivi elementi tramite figlio css selettori.

[] È anche possibile modificare il modello utilizzando windowTemplateUrl e sovrascrivere l'implementazione del modello predefinito o crearne uno da solo.

Answer 2

Angular UI Bootstrap applica una classe condizionale a ogni modale in base a quale stringa viene passata come opzione di dimensione a modalInstance.

<div class="modal-dialog" ng-class="size ? 'modal-' + size : ''"> 

È possibile passare una stringa personalizzata per creare una classe nel formato modal- [yourSizeString]. Estendere le dimensioni modali predefinite passando in size: 'xl' o qualcosa di simile per generare la classe modal-xl che può essere abbinata a una larghezza personalizzata.

JS

myOpenFunc = function() { 
    var modalInstance = $modal.open({ 
     animation: true, 
     templateUrl: 'mypage.html', 
     size: 'xl', 
     controller: 'myCtrl' 
    }); 
}; 

CSS

.modal-xl { 
    width: 1200px; 
}