Angular UI 부트스트랩에서 모달 폭을 늘리려면 어떻게 해야 합니까?

Angular UI 부트스트랩에서 모달 폭을 늘리려면 어떻게 해야 합니까?

모달 작성 중:

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

폭을 늘릴 수 있는 방법이 있나요?

다음과 같은 css 클래스를 사용하여 modal-dialog 클래스를 대상으로 합니다.

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

다음으로 모달 창을 호출하는 컨트롤러에서 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;
            });
    };

또 하나의 간단한 방법은 2개의 프리메이드 사이즈를 사용하여 html에서 함수를 호출할 때 파라미터로 전달하는 것입니다.use: 너비가 900px인 대형 모달의 경우 'lg'는 너비가 300px인 소형 모달의 경우 또는 매개 변수가 전달되지 않은 경우 기본 크기인 600px를 사용합니다.

코드 예:

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

html에서는 다음과 같은 것을 사용합니다.

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

보다 넓은 뷰포트 해상도를 위해 팝업용으로 .modal-lg 클래스의 커스텀폭을 지정할 수 있습니다.방법은 다음과 같습니다.

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

uibModal 클래스를 덮어쓰고 필요에 따라 사용할 필요가 없는 다른 방법이 있습니다.$uibModal.open 함수를 "xlg"와 같은 자체 크기 유형으로 호출한 후 다음과 같이 "modal-xlg"라는 이름의 클래스를 정의합니다.

.modal-xlg{
   width:1200px;
}

$uibModal.open을 다음과 같이 호출합니다.

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

이것은 동작합니다. 왜냐하면 어떤 크기의 부트스트랩을 건네주든 간에 "모달"로 묶어서 창문에 대한 클래스 역할을 하게 됩니다.

모달(modal)을 열면 크기를 파라멘터로 받아들입니다.

가능한 크기 값: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>

특정 크기를 원하는 경우 HTML 모델에 스타일을 추가합니다.

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

Bootstrap-ui에서 템플릿을 넘겨받는 것이 더 쉬웠습니다.변경된 내용을 표시하기 위해 코멘트 첨부 HTML을 그대로 두었습니다.

기본 템플릿을 덮어씁니다.

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

대화상자 템플릿을 변경합니다(「modal-dialog」클래스와 「modal-content」클래스를 포함한 래퍼 DIV 를 메모해 주세요).

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

다음으로 변경할 CSS 클래스 또는 스타일 파라미터를 지정하여 모달에 호출합니다(다른 곳에서 이미 "앱"을 정의했다고 가정합니다).

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

"열기" 버튼을 추가하고 계속 발사합니다.

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

이제 원하는 클래스를 추가하거나 필요에 따라 너비/높이 크기를 변경할 수 있습니다.

또한 래퍼 디렉티브에 포함시켰는데, 이 시점부터는 사소한 것이어야 합니다.

건배.

저는 Dmitry Komin 솔루션을 사용하여 문제를 해결했지만, 브라우저에서 직접 작동시키기 위해 다른 CSS 구문을 사용합니다.

CSS

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

JS는 동일합니다.

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

각도 모달의 크기 특성을 사용하여 매우 간단한 방법으로 이 작업을 수행할 수 있습니다.

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

기본 대형 사이즈로 하려면 'modal-lg'를 추가할 수 있습니다.

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

각도 5의 경우 modal-dialog에서 max-width 사용

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

다른 권장 사항에 따라 windowClass를 사용합니다.TS : :

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

또한 css 코드를 global styles > styles.css에 넣어야 했습니다.

언급URL : https://stackoverflow.com/questions/21311736/how-do-i-increase-modal-width-in-angular-ui-bootstrap