Angular UI Bootstrapでモーダル幅を増やすにはどうすればよいですか?


109

私はモーダルを作成しています:

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

その幅を増やす方法はありますか?



1
幅はcssを使用していつでも変更できます。
Alex Choroshin 2014年

回答:


224

私はモーダルダイアログクラスをターゲットにするためにそのようなcssクラスを使用します:

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

6
これは素晴らしいです、私はそれがまた適用されなければならないことを知りませんでした.modal-dialog
Jaanus 2014年

Cssは.app-modal-windowと.modal-dialogの両方に適用する必要があるため、次のようにします。}
Alexander

2
@Alexander私のテストではそうではありませんが、モーダルダイアログの親要素に幅を追加すると、すべてが台無しになります。
Rob J 14年

@RobJacobs申し訳ありませんが、Boostrap 2.3.2を使用していることは言及していません。これが.app-modal-windowと.modal-dialogの両方に幅を設定する必要がある理由だと思います
Alexander

1
@ZeroDistraction定義されたwindowClassは、modalWindowディレクティブの要素クラス属性に追加されます-リンクファンクションはコンパイルフェーズの後にあるため、「C」ディレクティブはコンパイルされません。
Rob J

48

別の簡単な方法は、2つの既成サイズを使用して、HTMLで関数を呼び出すときにパラメーターとして渡すことです。使用:幅900pxの大きなモーダルの場合は「lg」、幅300pxの小さなモーダルの場合は「sm」、またはパラメーターを渡さない場合は、デフォルトサイズの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>  

3
ほとんどの場合、既成のサイズで十分です。カスタムCSSを実行する必要がないための+1!
キルホーファー2015

1
魅力のように動作します。既存の組み込みCSSサイズを明確にしていただきありがとうございます。
キングス

28

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

1
ソリューションは良いですが、CSS構文は私には正しくありません。CSSを調整する必要があります。
Jianwu Chen

12

モーダルを開くと、サイズをパラメーターとして受け入れます。

itサイズの可能な値: 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>

12

uibModalクラスを上書きして必要に応じて使用する必要のない別の方法があります。「xlg」のような独自のサイズタイプで$ uibModal.open関数を呼び出し、次に「modal-xlg」という名前のクラスを定義します。 :

.modal-xlg{
   width:1200px;
}

$ uibModal.openを次のように呼び出します:

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

これでうまくいきます。サイズブートストラップとして渡す文字列はすべて「モーダル」と一致し、これがウィンドウのクラスの役割を果たすためです。


3

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>

これで、必要に応じてクラスを追加したり、必要に応じて幅/高さのサイズを変更したりできます。

さらに、ラッパーディレクティブで囲みました。これは、これからは簡単なことです。

乾杯。


3

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

3

これは、角モーダルのサイズプロパティを使用して非常に簡単な方法で行うことができます。

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

1

デフォルトの大きなサイズをそのまま使用したい場合は、「modal-lg」を追加できます。

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

0

角度5のモーダルダイアログで最大幅を使用

.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コードをグローバルスタイル> styles.cssに配置する必要がありました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.