Come posso aumentare la larghezza modale in Bootstrap UI angolare?

Sto creando un modale:

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

c'è un modo per aumentare la sua larghezza?

Uso una classe CSS in questo modo per indirizzare la classe di dialogo modale:

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

Quindi nel controller che chiama la finestra modale, impostare 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;
            });
    };

Un altro modo semplice è usare 2 dimensioni predefinite e passarle come parametro quando si chiama la funzione nel proprio html. usa: 'lg' per modali grandi con larghezza 900px 'sm' per modali piccoli con larghezza 300px o senza passare alcun parametro usi la dimensione predefinita che è 600px.

codice di esempio:

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

e nell'html userei qualcosa di simile al seguente:

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

Puoi specificare una larghezza personalizzata per la classe .modal-lg in modo specifico per il tuo popup per una risoluzione più ampia del viewport. Ecco come farlo:

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

Quando apriamo un modale, accetta la dimensione come parametro:

Possibili valori per la dimensione: 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>

Se desideri una dimensione specifica, aggiungi lo stile sull'HTML del modello:

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

c'è un altro modo in cui non devi sovrascrivere le classi uibModal e usarle se necessario: chiami la funzione $ uibModal.open con il tuo tipo di dimensione come "xlg" e poi definisci una classe chiamata "modal-xlg" come sotto :

.modal-xlg{
   width:1200px;
}

chiama $ uibModal.open come:

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

e questo funzionerà. perché qualunque stringa passi come dimensione bootstrap la cocerà con "modal-" e questo svolgerà il ruolo di classe per window.

Ho trovato più semplice prendere in consegna il modello da Bootstrap-ui. Ho lasciato il commento HTML ancora al suo posto per mostrare cosa ho cambiato.

Sovrascrivi il loro modello predefinito:

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

Modifica il modello della finestra di dialogo (nota i DIV wrapper contenenti la classe "dialogo modale" e la classe "contenuto modale"):

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

E poi chiama il modale con qualsiasi classe CSS o parametro di stile che desideri modificare (supponendo che tu abbia già definito "app" da qualche altra parte):

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

Aggiungi un pulsante "apri" e spara.

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

Ora puoi aggiungere qualsiasi classe extra desideri o semplicemente modificare le dimensioni di larghezza / altezza secondo necessità.

L'ho ulteriormente racchiuso all'interno di una direttiva wrapper, che dovrebbe essere banale da questo punto in avanti.

Saluti.

Ho risolto il problema utilizzando la soluzione Dmitry Komin, ma con una sintassi CSS diversa per farlo funzionare direttamente nel browser.

CSS

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

JS è lo stesso:

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

Puoi farlo in modo molto semplice usando la proprietà size del modale angolare.

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

Se vuoi solo andare con la dimensione grande predefinita puoi aggiungere 'modal-lg':

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

Usa larghezza massima nel dialogo modale per angolare 5

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

e usa windowClass come altri consigliati, ad esempio TS:

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

Inoltre, ho dovuto mettere il codice css in stili globali> styles.css.