web-dev-qa-db-ja.com

Bootstrap and bootbox：動的に確認ウィンドウの幅を変更する

私はBootstrapをWebアプリケーションに使用しており、削除操作を続行する前にウィンドウを表示するためにブートボックス（ http://bootboxjs.com ）を使用しています。

さまざまな削除オプションについて、さまざまなメッセージを表示する必要があります。幅の異なる確認ウィンドウを表示したいと思います。

これをJavaScriptコードで動的に行うにはどうすればよいですか？私はすべてを見ましたが、解決策を見つけることができません。

アイデアや提案をありがとう！

乾杯。

twitter-bootstrapbootbox
14
curious1

'bootbox.classes'を使用して、カスタムクラスをブートボックスウィンドウに追加することができます。小、中、大のようないくつかの標準CSSクラスを作成し、CSSで幅を割り当てる必要があると思います。

次に、すべてのブートボックスで以下のような行を使用します（例）：

bootbox.classes.add('medium');

ドキュメントによると、bootbox.classesはヘルパーメソッドなので、動作するはずです。 http://bootboxjs.com/documentation.html

ドキュメントから取り出されたようですが、上記の方法がまだ機能するかどうかはわかりません。

以下は、独自のクラスをダイアログに追加する別の実装です（例）：

bootbox.dialog({

  message: "I am a custom dialog",
  animate: true,

  /**
   * @optional String
   * @default: null
   * an additional class to apply to the dialog wrapper
   */
  className: "medium"
  }
});
18
Nick N.

上記の答えはどれもうまくいかなかったので、次のことが期待どおりに機能するまでBootbox.js v4.2.0を使用するまでいじりました

Javascript：

bootbox.alert("Hello").find("div.modal-dialog").addClass("largeWidth");

[〜＃〜] css [〜＃〜]：

.largeWidth {
    margin: 0 auto;
    width: 90%;
}
22
SirDorius

Bootbox.confirmの最後にチェーンされたjQuery .AddClassを使用します。私の実装は次のようになります...

$("a#ArchiveBtn").click(function () {
    bootbox.confirm("Archive Location? Cannot be undone", function (result) {
        if (result) {
            $("form#ArchiveForm").submit();
        }

    }).find("div.modal-content").addClass("confirmWidth");
});

CSS ...

/* BootBox Extension*/
.confirmWidth {
    width: 350px;
    margin: 0 auto;
}
7
user3093178

Jqueryのブートボックスアラートに関する以前の回答に追加するだけです。

CSSクラスの宣言に個別に依存するのではなく、ワンライナーを使用することを検討してください。ただ、例えば、

_bootbox.alert("Customizing width and height.").find("div.modal-dialog").css({ "width": "100%", "height": "100%" });
_

Jqueryの.css()がトリックを実行するので、.addClass()を取り除くことができます。

5
rdonatoiop

ボックスをセットアップするときに、別のcssクラスを与えます

<style>
   .class-with-width { width: 150px !important; }
</style>
<script>
bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "class-with-width",
    "callback": function() {
        Example.show("great success");
    }
}]);
<script>
4
Michael Grassman

sizeプロパティを使用できます。関連するBootstrapモーダルサイズクラスをダイアログラッパーに追加します。有効な値は 'large'および 'small'です。

bootbox.setDefaults({ size: 'small' });

または、classNameプロパティを使用できます。これは、ダイアログラッパーに適用する追加のクラスです。

bootbox.setDefaults({ className: 'w-100' });

Css

// Example class (a bootstrap v4 utility class)
.w-100 {
    width: 100%;
}

これらの例ではsetDefaultsを使用していますが、これらのプロパティはどのブートボックスダイアログでも使用できます。この方法でデフォルトを上書きします。

bootbox.alert({ message: 'But without me how can you have mass?', className: 'w-100' })

デフォルトを保持するには、jQuery呼び出しをチェーンするか、実際のDOMにアクセスすることもできます;）。

bootbox.alert('Whoops!').addClass('w-100');
bootbox.alert('Sorry!')[0].classList.add('w-100');

bootbox.classesはバージョンでサポートされていません> 4.4.0

2
A1rPun

ダイアログ全体のサイズを変更するには、「div.modal-content」の代わりに「div.modal-dialog」を使用してください：

.find("div.modal-dialog").addClass("confirmWidth");

使用されるCSSは単に例です：

.confirmWidth {
  width:350px;
}
1
vess

これを使って- size:"small"またはsize:"large"

0
Om Shankar