モーダルコンテンツの内容が含まれている高さを設定していません

Question

私は角度とモーダルを学習しようとしています。モーダルが表示されますが、モーダルコンテンツdivはすべてのコンテンツを含むようにはなっていません。代わりに、コンテンツはちょうど非常に短いモーダルの一番下にあります。それが何をしているのかを以下の図を参照してください：

以下の3つのミニパラグラフと下のリンクは、モーダルの内側にあるはずです。ここで

は、 "ログイン" ページ用のコントローラである：ここで

MyApp.controller('loginController', ['$scope', '$location', '$translate', '$http', 'browserCheckService', 'modalService', function ($scope, $location, $translate, $http, browserCheckService, modalService) { 
    'use strict'; 
    $scope.checkBrowser = function() { 
     if (browserCheckService.browserCheck() === false) { 
      try { 
       var settings = { 
        title: 'Incompatible Browser Warning', 
        size: 'lg', 
        templateUrl: 'Pages/browserReject.html', 
        controller: 'browserRejectController' 
       } 
       modalService.DisplayModal(settings); 
      } catch (err) { 
       alert(err.message); 
      } 
     } 
    }; 
    $scope.checkBrowser(); 
}]); 

はbrowserRejectためのコントローラである：ここで

MyApp.controller('browserRejectController', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) { 
    'use strict'; 
    $scope.close = function() { 
     $uibModalInstance.dismiss(); 
    } 
}]); 

はmodalServiceです：

angular.module('MyApp').service('modalService', ['$uibModal', function ($uibModal) { 
    'use strict'; 
    this.DisplayModal = function (settings) { 
     if (settings === undefined) { 
      throw "Settings must be supplied for modal"; 
     } else { 
      var modalInstance = $uibModal.open({ 
       animation: true, 
       templateUrl: settings.templateUrl, 
       controller: settings.controller, 
       size: settings.size 
      }); 
     } 
    }; 
}]); 

browserCheckServiceはfalseに戻すように設定されているので、私はモーダルをテストできます。ここで

はbrowserReject.html内容である：それは現在モーダルの略として、ここでは

<div id="modalHeaderContainer"> 
    <div id="title">Incompatible Browser Warning</div> 
    <div id="closeButton"> 
     <button type="submit" class="close" ng-click="close()">X</button> 
    </div> 
</div> 
<hr /> 
<div id="jr_outer"> 
    <div id=jr_inner"> 
     <div id="jr_center"> 
      <p translate={{'application__browser_reject_message'}}"></p> 
      <ul> 
       <li> 
        <a target="_blank" href="http://www.google.com/chrome/>Google Chrome</a> 
       </li> 
       <li> 
        <a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/>Firefox</a> 
       </li> 
       <li> 
        <a target="_blank" href="http://www.apple.com/safari/>Safari</a> 
       </li> 
       <li> 
        <a target="_blank" href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

は私のCSSです：

/* CSS for modal settings */ 
.ng-modal-overlay { 
    /* A dark translucent div that covers the whole screen */ 
    position:absolute; 
    z-index:9999; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    opacity: 0.8; 
} 
.ng-modal-dialog { 
    /* A centered div above the overlay with a box shadow. */ 
    z-index:10000; 
    position: absolute; 
    width: 50%; /* Default */ 

    /* Center the dialog */ 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 

    background-color: #fff; 
    box-shadow: 4px 4px 80px #000; 
} 
.ng-modal-dialog-content { 
    padding:10px; 
    text-align: left; 
} 
.ng-modal-close { 
    position: absolute; 
    top: 3px; 
    right: 5px; 
    padding: 5px; 
    cursor: pointer; 
    font-size: 120%; 
    display: inline-block; 
    font-weight: bold; 
    font-family: 'arial', 'sans-serif'; 
} 

#modalHeaderContainer { 
    width:100%; 
    height: 1.5em; 
} 

#title { 
    float:left; 
    font-size:1.7em; 
    padding-left:.5em; 
} 

#closeButton { 
    float:right; 
    padding-top:.5em; 
    padding-right:.5em; 
} 
/* End CSS for modal settings */ 

私も、ポストhereとhereを読みましたいくつかの他のものと全く同じように見えるものはありません。私は非常にシンプルなものを見落としているように感じますが、それを見つけることはできません。 modal-contentのmax-heightを100％に設定しようとしましたが、それでも表示は変わりません。

Answer 1

あなたのCSSに以下のような何か実行して、デフォルト.modal-ウィンドウをオーバーライドする必要があります。

.mynewModal-modal-window .modal-window { 
    width: 100%; 
    height: 100%; 
} 

をし、$ uibModalのopenメソッドのパラメータとしてそのクラスを追加します。

this.DisplayModal = function (settings) { 
    if (settings === undefined) { 
     throw "Settings must be supplied for modal"; 
    } else { 
     var modalInstance = $uibModal.open({ 
      animation: true, 
      templateUrl: settings.templateUrl, 
      controller: settings.controller, 
      windowClass: 'myNewModal-modal-window', 
      size: settings.size 
     }); 
    } 
}; 

私はちょうど:(コントローラを経由してまだモーダルコンテンツを無効にする方法を発見していない

（似たものを持っていいだろう）