Comment augmenter la largeur modale dans Angular UI Bootstrap?

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 celle-ci pour cibler la classe modal-dialog:

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

Ensuite, dans le contrôleur appelant la fenêtre modale, définissez 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 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 html. utilisez: 'lg' pour les grands modaux avec une largeur de 900px 'sm' pour les petits modaux avec une largeur de 300px ou en ne passant aucun paramètre, vous utilisez la taille par défaut qui est de 600px.

code d'exemple:

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

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

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 comme paramètre:

Valeurs possibles pour sa taille: 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 vous voulez une taille spécifique, ajoutez du style sur le modèle HTML:

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

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 ensuite vous définissez une classe nommée "modal-xlg" comme ci-dessous :

.modal-xlg{
   width:1200px;
}

appelez $ uibModal.open comme:

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

et cela fonctionnera. parce que quelle que soit la chaîne que vous passez comme bootstrap de taille, la cocantera avec "modal-" et cela jouera le rôle de classe pour window.

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

Remplacez leur modèle par défaut:

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

Modifiez votre modèle de dialogue (notez les DIV wrapper contenant la classe "modal-dialog" et la classe "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>

Et puis appelez le modal avec la classe CSS ou les paramètres de style que vous souhaitez modifier (en supposant que vous ayez déjà défini "app" ailleurs):

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

Ajoutez un bouton "Ouvrir" et tirez.

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

Vous pouvez maintenant ajouter la classe supplémentaire de votre choix, ou simplement modifier les tailles de largeur / hauteur si nécessaire.

Je l'ai en outre inclus dans une directive wrapper, ce qui devrait être trivial à 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 que cela fonctionne 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é size de 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 vous voulez simplement utiliser la grande taille par défaut, vous pouvez ajouter 'modal-lg':

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

Utiliser max-width sur modal-dialog pour angulaire 5

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

et utilisez windowClass comme d'autres recommandés, TS 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 styles globaux> styles.css.