javascript - ブートボックス ウィンドウで css を変更する

Question

このコードの「Hello world」にスタイリング(ボールド属性としましょう)を追加するにはどうすればよいですか:

bootbox.alert("Hello world!", function() {
   Example.show("Hello world callback");
});

ありがとうございました

Answer 1

要約しましょう：

テキストのスタイリング用

html を文字列に直接追加します。

bootbox.alert("<b>Hello world!<b>"); // (thanks BenM)
bootbox.alert("<div class='label'>Hello world!</div>"); // (thanks Adriano)

組み込みのブートボックス要素のスタイリング用

返された jQuery オブジェクトを使用して、クラス、css などを変更します。

var box = bootbox.alert("Hello world!");
box.find('.modal-content').css({'background-color': '#f99'}); // (thanks Mark B)
box.find(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

Answer 2

最善の方法は、firebug を使用してポップアップを検査することです。モーダル ウィンドウを構成する HTML を確認できるので、CSS を記述できます。彼らのウェブサイトの例を見ると、基本的な例を構成する html は次のとおりです。

<div style="overflow: hidden;" tabindex="-1" class="bootbox modal fade in" aria-hidden="false">
<div class="modal-body">Hello world!</div>
<div class="modal-footer"><a href="javascript:;" class="btn btn-primary" data-handler="0">OK</a></div>
</div>

フッターの色を変更したい場合:

.modal-footer {background:#c00;}

Answer 3

不透明度 0 の空の div を作成できます。

<div id="msgbox"></div>

次に、jsで不透明度の変更を簡単に使用できます。

 bootbox.alert(x, function() { 
document.getElementById('msgbox').innerHTML = x; document.getElementById('msgbox').style.opacity= '1'; setTimeout(function(){ document.getElementById('msgbox').style.opacity = '0'; }, 2000);  });

また、位置、色、またはいくつかのトランジションを使用して、メッセージボックスを自由にスタイルできます

#msgbox { color: #CC0000; font-weight: bold; text-align: center; transition: all 1s linear; -webkit-transition: all 1s linear; }

Answer 4

Example.show();このコードをページのどこかに配置すると仮定すると、要素をストロングでラップすると機能します。

 bootbox.alert("Hello world!", function() {
   Example.show("<strong>Hello world</strong> callback");
 });