ng-bootstrapでモーダルの位置を変更する方法

Question

モーダルを表示する方法は、デフォルトではなく、トップを中心に表示することができません。私にとっては、最も醜い場所ですモーダル。

誰でも助けてもらえますか？

まず、中間のどこかに表示したいと思います。

私はモーダルのコンポーネントスタイルシートでCSSを変更しようとしましたが、失敗しました。私はすべてのモーダルのスタイルを変更したくありません。

Answer 1

次のHTML構造に開いているモーダル機能に設定クラスを使用してモーダルダイアログに

openModal(modal_id) { 
    this.modalService.open(modal_id, { windowClass: 'custom-class' }); 
    } 

以上の結果を独自のカスタムクラスを追加することができます。

<div class="modal custom-class"> 
    <div class="modal-dialog"> 
      <div class="modal-content"> 
       ... 
      </div> 
    </div> 
</div> 

あなたのカスタムCSSことができます次のコードがあります。

.custom-class { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 2

もう1つの方法があります。 bootstrap modal文書に見られるように、モーダルは固定位置を使用しています。あなたは、ウィンドウクラスを使用して適用されるデフォルトのブートストラップクラスをオーバーライドして、あなたは答えのために、このexample

styles: [` 
.dark-modal .modal-content { 
    background-color: #292b2c; 
    color: white; 
    top:200px; 
} 
.dark-modal .close { 
    color: white; 
} 
`]