Bagaimana cara meningkatkan lebar modal di Angular UI Bootstrap?

Saya membuat modal:

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

apakah ada cara untuk menambah lebarnya?

Saya menggunakan kelas css seperti itu untuk menargetkan kelas modal-dialog:

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

Kemudian di pengontrol yang memanggil jendela modal, setel 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;
            });
    };

Cara mudah lainnya adalah dengan menggunakan 2 ukuran yang telah dibuat sebelumnya dan meneruskannya sebagai parameter saat memanggil fungsi di html Anda. gunakan: 'lg' untuk modals besar dengan lebar 900px 'sm' untuk modals kecil dengan lebar 300px atau tanpa melewatkan parameter gunakan ukuran default yaitu 600px.

kode contoh:

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

dan di html saya akan menggunakan sesuatu seperti berikut:

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

Anda dapat menentukan lebar khusus untuk kelas .modal-lg khusus untuk munculan Anda untuk resolusi viewport yang lebih luas. Berikut cara melakukannya:

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

Saat kita membuka modal, ia menerima ukuran sebagai parameter:

Nilai yang memungkinkan untuk ukurannya: 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>

Jika Anda menginginkan ukuran tertentu, tambahkan gaya pada model HTML:

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

ada cara lain di mana Anda tidak perlu menimpa kelas uibModal dan menggunakannya jika diperlukan: Anda memanggil fungsi $ uibModal.open dengan jenis ukuran Anda sendiri seperti "xlg" dan kemudian Anda menentukan kelas bernama "modal-xlg" seperti di bawah ini :

.modal-xlg{
   width:1200px;
}

panggil $ uibModal.open sebagai:

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

dan ini akan berhasil. karena string apa pun yang Anda berikan sebagai ukuran bootstrap akan menggabungkannya dengan "modal-" dan ini akan memainkan peran kelas untuk jendela.

Saya merasa lebih mudah untuk mengambil alih template dari Bootstrap-ui. Saya masih membiarkan HTML komentar tetap di tempatnya untuk menunjukkan apa yang saya ubah.

Timpa template default mereka:

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

Ubah template dialog Anda (perhatikan DIV pembungkus yang berisi kelas "modal-dialog" dan kelas "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>

Dan kemudian panggil modal dengan kelas CSS atau parameter gaya apa pun yang ingin Anda ubah (dengan asumsi Anda telah mendefinisikan "app" di tempat lain):

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

Tambahkan tombol "buka" dan tembak.

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

Sekarang Anda dapat menambahkan kelas tambahan apa pun yang Anda inginkan, atau cukup ubah ukuran lebar / tinggi seperlunya.

Saya lebih lanjut menyertakannya dalam petunjuk pembungkus, yang seharusnya sepele dari titik ini dan seterusnya.

Bersulang.

Saya memecahkan masalah menggunakan solusi Dmitry Komin, tetapi dengan sintaks CSS yang berbeda untuk membuatnya berfungsi langsung di browser.

CSS

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

JS sama:

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

Anda dapat melakukan ini dengan cara yang sangat sederhana menggunakan properti ukuran modal sudut.

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

Jika Anda ingin menggunakan ukuran besar default, Anda dapat menambahkan 'modal-lg':

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

Gunakan max-width pada modal-dialog untuk sudut 5

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

dan gunakan windowClass seperti yang direkomendasikan lainnya, TS misalnya:

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

Juga, saya harus meletakkan kode css di global styles> styles.css.