UI Bootstrap(Bootstrap3)で利用している特定のモーダルだけをフルスクリーン表示にしたい

Question

UI Bootstrap(Bootstrap3)の特定のモーダルだけをフルスクリーン表示にしたいです。
以下のように上書きすると、全てのモーダルがフルスクリーンになってしまいます。

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

angular-ui
のモーダルを利用しております。

以上、よろしくお願い致します。

Answer 1

AngularUIのモーダルを利用している場合は
以下のようにCSSを定義してwindowTopClassに文字列で
modal-custom-lgを設定することで特定のモーダルのみに
modal-dialogを改変したCSSを当てることが出来ました。

モーダルのフルスクリーン例

var modalInstance = $uibModal.open({
    animation: true,
    component: 'authModal',
    windowTopClass: 'modal-custom-lg'
});

.modal-custom-lg .modal-dialog {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.modal-custom-lg .modal-content {
  width: 100%;
  height: 100vh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

Answer 2

特定のダイアログだけに有効なクラスをつければよいのでは?

.full-modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.full-modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

Comments

[tama2015]

申し訳ございません。私の理解不足で質問文が間違っておりました。
Bootｓｔrap3はなくUI Bootstrapにおいてでした。
回答者様の回答からもう一度仕様を確認して回答を導くことが
出来ました。ありがとうございました。