0

jQuery ベースの Web アプリケーションを AngularJS に移行中です。bootstrap-modal プラグインを AngularUI Bootstrap と統合するのに問題があります。ブートストラップ モーダル プラグインは、全幅モーダル、レスポンシブ デザイン、スタック可能なモーダルなど、私が必要とするいくつかの機能を提供します。

plunkerで 2 つを統合する基本的な試みを行いました。ウィンドウ幅が小さい場合、モーダルは全幅に見えることに注意してください。しかし、plunker のプレビュー ウィンドウをポップアウトして、ウィンドウの幅を 979 ピクセルを超えて大きくすると、モーダルがページの半分に落ちます。CSS がモーダルを "top: 50%" に設定することをブートストラップ モーダル ソース コードで確認できますが、JS はモーダルの高さに基づいて負の margin-top を設定することになっているため、モーダルは中央に垂直に配置されます。ページの。JS が適切に呼び出されていないため、モーダルがページの下部に偏っています。

以下のプランカーからのコードスニペット。

HTML:

<div ng-controller="ModalDemoCtrl">
    <button class="btn" ng-click="open()">Open me!</button>
    <div modal="shouldBeOpen" close="close()" options="opts">
        <div class="modal-header">
            <button type="button" ng-click="close('edit')" class="close" data-dismiss="modal">x</button>
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">{{item}}</li>
            </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
        </div>
    </div>
</div>

JavaScript コントローラー:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope) {

  $scope.open = function () {
    $scope.shouldBeOpen = true;
  };

  $scope.close = function () {
    $scope.closeMsg = 'I was closed at: ' + new Date();
    $scope.shouldBeOpen = false;
  };

  $scope.items = ['item1', 'item2'];

  $scope.opts = {
    backdropFade: true,
    dialogFade:true
  };

};

代替アプローチは、AngularUI Bootstrap を使用せず、bootstrap の通常の方法を使用してモーダル HTML にコーディングするだけのようです。AngularJSを使用しながら、まさにそれを行うこのjsFiddleを見つけました。可能であれば、AngularUI メソッドを使用したいと思います。

4

2 に答える 2

0

問題は、bootstrap-modal.css レスポンシブ セクション: @media (max-width: 979px){...} にあります。必要ない場合は、(max-width から min-width に変更して直接変更します) ) または、コードのそのセクションをコピーして、後で html でオーバーライドします。

于 2013-08-29T20:22:05.573 に答える