ブートストラップ モーダル ポップアップの垂直方向の中央揃え

私はフロントエンドの初心者で、会社のプロジェクトでブートストラップを使用しようとしています。同僚のために率先して「ピット」を通過しようとしていますが、UI ガールのせいでモーダル ポップアップを作成するのが困難です。フロントエンド開発の立場の名誉のために、私はそれを満足させるために時間を費やしました。

最初の方法は、ソースコードを変更することです

that.$element.children().eq(0).css("position", "absolute").css({
     "margin":"0px",
     "top": function () {
       return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";
     },
    "left": function () {
       return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
     }
   });

ここでのthat.elementは最も外側のdiv.modalであり、that.element.children().eq(0)はdiv. Modal-dialog は、modal-dialog の左の値と高さの値を計算して中央に置くだけです。ここで問題が発生します。このコードを bootstrap.js のソース コード (約 1000 行) に追加します。 that.element.children().eq(0).width() は常に 0 です。これは、まだ作成されておらず、値を取得できないことを意味します。私の意見では、setTimeout 遅延を追加しました。 150 ミリ秒ですが、センタリングではさらに 2 つの問題が発生します。1 つは、ユーザーがウィンドウ サイズをアクティブにドラッグすると、それに応じて調整されないことです。2 つ目の問題の解決策も非常に簡単です。それは、ウィンドウが 600 より小さい場合です。 element.children().eq(0).width() の値は正しい場合もあれば、間違っている場合もあります (答えを助けるために通りすがりのマスターに依頼してください)。そのため、この値は破棄します。問題を直接解決したい場合は、無視してください。

垂直方向に中央に配置して、表示を検討してください。これもインターネットからインスピレーションを得たもので、解決策は次のとおりです。

スタイルを書き換えて、スタイルタグまたは外部リンクをHTMLに導入します

.modal-dialog{display:table-cell;vertical-align:middle;}
.modal-content{width:600px;margin:0px auto;}
@media screen and (max-width: 780px) {
.modal-content{width:400px;}
}
@media screen and (max-width: 550px) {
.modal-content{width:220px;}
}

モーダルトリガーイベント$('.modal').modal()を次の

$('.modal').modalに変更します。 (). css({'display':'table','width':'100%','height':'100%'})

変更は非常に簡単ですが、その結果は非常に暴力的になります。どこをクリックしてもモーダルが消えます。検索した情報にはそのように書かれていましたが、理解できませんでした。

フォークして閉じるボタンをクリックすると閉じることができます。後ろにいる同僚に見下されないように、js に Jiangzi コードを 2 行挿入したいと思います

この時点で、モーダルの垂直方向の中央揃えは実現できますが、モーダルバックドロップのフェードイン時間とフェードアウト時間がオリジナルに比べて誇張されすぎているのがまだ問題です。まだ少し奇妙です。アドバイスをお願いします。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

ブートストラップ モーダル ポップアップ ボックスの垂直方向のセンタリングに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。