ブートストラップとブートボックス:ダイアログボックスを画面の中央に設定します

Rocx

http://bootboxjs.com/examples.htmlのbootbox.jsを使用していますが、非常に印象的です。しかし、ダイアログボックスの場所を設定する際に問題が発生します。

ダイアログボックスを画面の中央に配置したい。このコードを使用していますが、ダイアログボックスが画面の上部に表示されたままになります。

 bootbox.alert('Danger!!').find('.modal-content').css({
     'background-color': '#f99',
     'font-weight': 'bold',
     color: '#F00',
     'top': '50%',
     'margin-top': function() {
         return -(box.height() / 2);
     },
     'font-size': '2em',
     'font-weight': 'bold'
 });

画面中央のダイアログボックスの設定方法を教えてください。

MBパルベスロニー

モーダルはすでに水平方向の中央に配置されています。垂直中心のモーダルが必要な場合は、これがうまくいくことを願っています

bootbox.alert('Danger!!' ).find('.modal-content').css({
    'background-color': '#f99',
    'font-weight' : 'bold',
    'color': '#F00',
    'font-size': '2em',
    'margin-top': function (){
        var w = $( window ).height();
        var b = $(".modal-dialog").height();
        // should not be (w-h)/2
        var h = (w-b)/2;
        return h+"px";
    }
});

あなたの例に従ってこの答えを与える。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

チェックボックスにブートストラップモーダル/ダイアログの確認を追加します

分類Dev

チェックボックスにブートストラップモーダル/ダイアログの確認を追加します

分類Dev

ブートストラップアラートボックスの幅を設定します

分類Dev

CSSはブートストラップボックスのサイズ設定を無効にします

分類Dev

「CenterVertical」プロパティは、モーダルブートボックスを画面の中央に配置しません

分類Dev

ブートストラップのテキストボックスを中央揃えにします

分類Dev

ブートストラップダイアログのチェックボックスを選択すると、背景領域が選択されます

分類Dev

ブートボックスブートストラップjqueryプラグインのアラートダイアログにカスタムクラスを追加します

分類Dev

非モーダルブートストラップダイアログボックスを作成する方法

分類Dev

ブートボックスtextareaのIDを設定します

分類Dev

ログインフォームをブートストラップで画面の中央に配置します

分類Dev

ブートボックスダイアログモーダルブートストラップ4

分類Dev

ブートストラップを介して中央にカードボックスを取得します

分類Dev

ユーザーユーザーがブートストラップダイアログボックスでリンクを確認した場合は、それぞれのリンクにリダイレクトします

分類Dev

Wixインストーラーのセットアップダイアログにグループボックスと画像を挿入する方法

分類Dev

Twitterのブートストラップボックスのサイズ設定が私のレイアウトを台無しにした

分類Dev

ブートストラップのチェックボックスで必要なプロパティを設定します

分類Dev

画面の中央に「OR」ボックス オーバーレイを使用したブートストラップ 50/50 div

分類Dev

Symfony2:ブートストラップレイアウトの下のチェックボックスのフォームラベルを設定する

分類Dev

ブートストラップモーダル内のボタンクリックイベントでアクティブなタブIDを取得します

分類Dev

ブートストラップのモーダル幅を画面のパーセントに設定し、中央に配置します

分類Dev

Androidチェックボックスボックスの色をプログラムで変更しますか(サポートライブラリ)?

分類Dev

ブートストラップVueテーブルの最初のフィールドとしてチェックボックスを設定する方法

分類Dev

スクリーンショットを作成するときにダイアログボックスをオフにする設定はありますか?

分類Dev

セクションの中央にブートストラップボタンを配置します

分類Dev

セクションの中央にブートストラップボタンを配置します

分類Dev

ブートストラップの編集可能なダイアログボックスの編集(上部にX閉じるボタンを追加)

分類Dev

モバイル画面のブートストラップ列の要素を中央に配置しようとしています(メディアクエリ)

分類Dev

ブートストラップの列幅を埋めるようにリストボックス幅を設定します

Related 関連記事

  1. 1

    チェックボックスにブートストラップモーダル/ダイアログの確認を追加します

  2. 2

    チェックボックスにブートストラップモーダル/ダイアログの確認を追加します

  3. 3

    ブートストラップアラートボックスの幅を設定します

  4. 4

    CSSはブートストラップボックスのサイズ設定を無効にします

  5. 5

    「CenterVertical」プロパティは、モーダルブートボックスを画面の中央に配置しません

  6. 6

    ブートストラップのテキストボックスを中央揃えにします

  7. 7

    ブートストラップダイアログのチェックボックスを選択すると、背景領域が選択されます

  8. 8

    ブートボックスブートストラップjqueryプラグインのアラートダイアログにカスタムクラスを追加します

  9. 9

    非モーダルブートストラップダイアログボックスを作成する方法

  10. 10

    ブートボックスtextareaのIDを設定します

  11. 11

    ログインフォームをブートストラップで画面の中央に配置します

  12. 12

    ブートボックスダイアログモーダルブートストラップ4

  13. 13

    ブートストラップを介して中央にカードボックスを取得します

  14. 14

    ユーザーユーザーがブートストラップダイアログボックスでリンクを確認した場合は、それぞれのリンクにリダイレクトします

  15. 15

    Wixインストーラーのセットアップダイアログにグループボックスと画像を挿入する方法

  16. 16

    Twitterのブートストラップボックスのサイズ設定が私のレイアウトを台無しにした

  17. 17

    ブートストラップのチェックボックスで必要なプロパティを設定します

  18. 18

    画面の中央に「OR」ボックス オーバーレイを使用したブートストラップ 50/50 div

  19. 19

    Symfony2:ブートストラップレイアウトの下のチェックボックスのフォームラベルを設定する

  20. 20

    ブートストラップモーダル内のボタンクリックイベントでアクティブなタブIDを取得します

  21. 21

    ブートストラップのモーダル幅を画面のパーセントに設定し、中央に配置します

  22. 22

    Androidチェックボックスボックスの色をプログラムで変更しますか(サポートライブラリ)?

  23. 23

    ブートストラップVueテーブルの最初のフィールドとしてチェックボックスを設定する方法

  24. 24

    スクリーンショットを作成するときにダイアログボックスをオフにする設定はありますか?

  25. 25

    セクションの中央にブートストラップボタンを配置します

  26. 26

    セクションの中央にブートストラップボタンを配置します

  27. 27

    ブートストラップの編集可能なダイアログボックスの編集(上部にX閉じるボタンを追加)

  28. 28

    モバイル画面のブートストラップ列の要素を中央に配置しようとしています(メディアクエリ)

  29. 29

    ブートストラップの列幅を埋めるようにリストボックス幅を設定します

ホットタグ

アーカイブ