UI Bootstrapのモーダルの表示位置を変更

UI Bootstrapで表示されるモーダルはデフォルトだと画面のだいぶ上の方に表示される。
それを任意の位置に表示させる方法。

クラス定義

まずはモーダルの位置を調整するためにCSSのクラスを定義する。

.center-modal {
    top: 20%;
}

とりあえず、位置をもう少し下にするためにtop:20%を指定。

あとは、モーダルのopenで指定するオプションにwindowClass: 'center-modal'を指定してやればOK。

$uibModal.open({
                templateUrl: "modal.html",
                windowClass: 'center-modal'
            });

これだけで、center-modalで指定したcssでモーダルの位置が調整される。
もう少し右に移動したいときはleft:20%のように設定すれば右に移動する。

20160321追記
windowClassに設定したクラスのtopやleftで位置を指定した場合、元の表示位置からずれた分だけモーダルの表示領域がずれるため、backdrop:trueの場合にずれた分の位置でクリックをしてもモーダルが閉じないという現象が発生します。
その場合は

.center-modal .modal-dialog{
    margin-top: 20%;
}

のように、一つ下のクラスであるmodal-dialogにmargin-topとして指定してやることで、
クリック領域はずれずにモーダルの内容だけ表示位置をずらすことができます。