Comment augmenter la largeur modale dans Angular UI Bootstrap?

Réponses:

224

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;
            });
    };
Rob J
la source
6
C'est génial, je ne savais pas qu'il fallait aussi l'appliquer à.modal-dialog
Jaanus
Css doit être appliqué à la fois sur .app-modal-window et .modal-dialog, donc: .app-modal-window, .modal-dialog {width: 500px; }
Alexander
2
@Alexander Pas d'après mes tests, ajouter une largeur à l'élément parent de la boîte de dialogue modale tout va bien.
Rob J
@RobJacobs désolé, je n'ai pas mentionné que j'utilise boostrap 2.3.2. Je suppose que c'est la raison pour laquelle je devrais définir la largeur à la fois pour .app-modal-window et .modal-dialog
Alexander
1
@ZeroDistraction La windowClass définie est ajoutée à l'attribut de classe d'élément dans la directive modalWindow - fonction de liaison qui se trouve après la phase de compilation, donc la directive 'C' n'est pas compilée.
Rob J
48

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>  
Daniele Urania
la source
3
Je trouve que dans la plupart des cas, les tailles pré-faites sont tout ce dont j'ai besoin. +1 pour ne pas avoir à effectuer de CSS personnalisé!
Kilhoffer le
1
fonctionne comme un charme. Merci d'avoir clarifié les tailles css intégrées existantes.
Kings
28

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'
});
Dmitry Komin
la source
1
La solution est bonne, mais la syntaxe CSS ne me convient pas. Je dois ajuster le css.
Jianwu Chen du
12

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>
Ali Adravi
la source
12

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.

parichehr.mohebbi
la source
3

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

romain
la source
3

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'
});
Jianwu Chen
la source
3

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'
                });
Sameer Khan
la source
1

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'
});
alexoviedo999
la source
0

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.

ajsanjh
la source