Angular UI Bootstrap'te mod genişliğini nasıl artırabilirim?

Bir model oluşturuyorum:

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

genişliğini artırmanın bir yolu var mı?

Modal-dialog sınıfını hedeflemek için böyle bir css sınıfı kullanıyorum:

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

Ardından, kalıcı pencereyi çağıran denetleyicide windowClass'ı ayarlayın:

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

Diğer bir kolay yol, 2 önceden hazırlanmış boyutu kullanmak ve html'nizdeki işlevi çağırırken bunları parametre olarak iletmektir. Kullanım: 'lg' genişliği 900px olan büyük modaller için 300px genişliğine sahip küçük modlar için 'sm' veya 600px olan varsayılan boyutu kullanmadığınız hiçbir parametre geçirmeden.

örnek kod:

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

ve html'de aşağıdaki gibi bir şey kullanırım:

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

Daha geniş görüntü alanı çözünürlüğü için özellikle pop-up'ınız için .modal-lg sınıfı için özel genişlik belirtebilirsiniz. İşte nasıl yapılacağı:

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

Bir modal açtığımızda, boyutu parametre olarak kabul eder:

Boyutu için olası değerler: 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>

Belirli bir boyut istiyorsanız, model HTML'sine stil ekleyin:

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

uibModal sınıflarının üzerine yazmak ve gerekirse kullanmak zorunda olmadığınız başka bir yol daha var: "xlg" gibi kendi boyut türünüzle $ uibModal.open işlevini çağırırsınız ve ardından aşağıdaki gibi "modal-xlg" adlı bir sınıf tanımlarsınız :

.modal-xlg{
   width:1200px;
}

$ uibModal.open'ı şu şekilde çağırın:

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

ve bu işe yarayacak. çünkü boyut olarak geçirdiğiniz dizge ne olursa olsun bootstrap onu "modal-" ile birleştirecek ve bu pencere için sınıf rolü oynayacaktır.

Şablonu Bootstrap-ui'den devralmayı daha kolay buldum. Neyi değiştirdiğimi göstermek için yorum yapılan HTML'yi hala yerinde bıraktım.

Varsayılan şablonlarının üzerine yazın:

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

Diyalog şablonunuzu değiştirin ("modal-dialog" sınıfını ve "modal-content" sınıfını içeren sarmalayıcı DIV'lerine dikkat edin):

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

Ve sonra, değiştirmek istediğiniz CSS sınıfı veya stil parametreleriyle kipi çağırın ("uygulamayı" başka bir yerde zaten tanımlamış olduğunuzu varsayarak):

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

Bir "aç" düğmesi ekleyin ve ateş edin.

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

Artık istediğiniz ekstra sınıfı ekleyebilir veya gerektiğinde genişlik / yükseklik boyutlarını değiştirebilirsiniz.

Bunu, bu noktadan sonra önemsiz olması gereken bir sarmalayıcı yönergesinin içine ekledim.

Şerefe.

Sorunu Dmitry Komin çözümünü kullanarak çözdüm, ancak doğrudan tarayıcıda çalışmasını sağlamak için farklı CSS sözdizimi ile.

CSS

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

JS aynıdır:

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

Bunu, açısal modalin size özelliğini kullanarak çok basit bir şekilde yapabilirsiniz.

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

Yalnızca varsayılan büyük boyutla gitmek istiyorsanız, 'modal-lg' ekleyebilirsiniz:

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

Açısal 5 için modal iletişim kutusunda maksimum genişliği kullan

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

ve windowClass'ı diğerlerinin önerdiği gibi kullanın, örneğin TS:

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

Ayrıca, css kodunu global styles> styles.css içine koymam gerekiyordu.