20

Angular UI Bootstrap ダイアログは実装が簡単ですが、カスタマイズが困難です。

いったいどうやって幅を変えるのですか？それとも最大幅？

http://angular-ui.github.com/bootstrap/#/dialog

私は$dialog.dialog({width:600})他のバリエーションを試しましたが、喜びはありません。

4

4 に答える 4

6

ブラウザ コンソールのダイアログを調べると、幅が css のみで設定されていることがわかります。ドキュメントのオプションを使用すると、本文やダイアログでユーザー定義のクラス名を使用できるため、ページ内のさまざまなタイプを調整できます

ドキュメント参照: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md

于 2013-03-29T13:45:35.387 に答える
3

$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" で開きます - 「モーダル」を含める必要があることに注意してください。そうしないと、ダイアログの内容が背景の下に表示されます。

次に、この css を使用して幅を変更できます。

.modal.myWindow {
    width:700px;
    margin-left:-350px
}

幅の 1/2 の負の左マージンを含める必要があります。そうしないと、中心から外れます。

于 2013-09-15T01:57:42.540 に答える