Angular UI Bootstrap Dialogは実装が簡単ですが、カスタマイズが困難です。
一体どのように幅を変更しますか?それとも最大幅ですか?
http://angular-ui.github.com/bootstrap/#/dialog
$dialog.dialog({width:600})
やその他のバリエーションを試しましたが、喜びはありません。
ブラウザコンソールのダイアログを調べると、幅がcssのみで設定されていることがわかります。ドキュメントのオプションにより、本文またはダイアログ上でユーザー定義のクラス名を使用できるため、ページ内のさまざまなタイプに合わせて調整できます。
ドキュメントリファレンス: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md
バージョン0.8/0.9では、モーダルクラスを指定しないようにレイアウトが変更されたため、少し手を加えて、次のようなネストされたCCS定義を使用できることがわかりました。
.xx-dialog .modal-dialog {
width :90%;
min-width: 800px;
}
そして、モーダルダイアログを起動するとき、次のようにwindowsStyleを指定します。
modalInstance = $modal.open({
templateUrl: 'templates/editxxx.html',
controller: EditXXCtrl,
windowClass: 'xx-dialog',
resolve: {
xx_uuid: function () {
return xx_guid;
}
}
});
ただし、windowsstyleはbackdropを含むWHOLEウィンドウ用であることに注意してください。それが役に立てば幸い
デフォルトのCSSクラスはmodal
です。dialogClass
オプション(またはoptions
ディレクティブを使用している場合はmodal
属性)を使用して、追加のCSSクラスを指定します。例えば:
$dialog.dialog({dialogClass: 'modal modal-huge'});
モーダルディレクティブの場合:
<div modal="modalVisible" close="close()"
options="{dialogClass:'modal modal-huge'}">
<div class="modal-header"><h3>Hello</h3></div>
<div class="modal-body">Hello world!</div>
<div class="modal-footer">
<button ng-click="dialogs.escolherModelo=false"
class="cancel btn btn-warning">Cancel</button>
</div>
</div>
ダイアログの幅を乱している場合、ダイアログを中央に配置するには、CSSルールに負のmargin-left
幅の半分:
.modal-huge {
width: 80%;
margin-left: -40%;
}
@media (max-width: 600px) {
.modal-huge {
width: 580px;
margin-left: -290px;
}
}
[更新]
現在はwindowClassと呼ばれ、CSSルールは内側の.modal-dialogに対応している必要があります。したがって、-.modal-huge .modal-dialog – SET
痛い、javascriptの世界では何も解決されていないようだ。これはテストされていません:
$dialog.dialog({windowClass: 'modal-huge'});
モーダルディレクティブの場合:
<div modal="modalVisible" close="close()"
options="{windowClass:'modal-huge'}">
<div class="modal-header"><h3>Hello</h3></div>
<div class="modal-body">Hello world!</div>
<div class="modal-footer">
<button ng-click="dialogs.chooseModel=false"
class="cancel btn btn-warning">Cancel</button>
</div>
</div>
ダイアログの幅を乱している場合、ダイアログを中央に配置するには、CSSルールに負のmargin-left
幅の半分:
.modal-dialog .modal-huge {
width: 80%;
margin-left: -40%;
}
@media (max-width: 600px) {
.modal-dialog .modal-huge {
width: 580px;
margin-left: -290px;
}
}
$ dialogサービスを使用して、angularのモーダルダイアログに別のクラスを追加する方法は次のとおりです。
var opts = {
backdrop: true,
keyboard: true,
backdropClick: true,
templateUrl: 'my-partial.html',
controller: 'MyPartiallController',
dialogClass: 'modal myWindow'
};
var d = $dialog.dialog(opts);
d.open();
Class = "modal myWindow"でダイアログが開きます-'modal'を含める必要があることに注意してください。そうしないと、ダイアログの内容が背景の下に表示されます。
次に、このCSSを使用して幅を変更できます。
.modal.myWindow {
width:700px;
margin-left:-350px
}
幅の1/2の負の左マージンを含める必要があります。そうしないと、中央からずれます。