ウィンドウのサイズを変更すると、左からモーダルカットをブートストラップします
エース
幅が900pxのブートストラップモーダルがあります。最初にウィンドウのサイズを変更しようとすると、上部と左側の部分がカットされました。しかし、cssを変更した後、上部が切り取られるのを防ぐことができました。問題は、それがまだ左側の部分を切り取っていることです。図は問題を示しています。
右の部分は正常に動作しています。スクロールすると正しく表示されます。
CSS
.modal {
position: absolute;
margin: 0;
}
.modal.fade.in {
top: 10%;
}
#myModal{width:900px}
JS
$('#myModal').css({
'margin-left': function () {
return -($(this).width() / 2);
}
});
応答性を高めたくありません。これどうやってするの？事前にtnx
ムジャファー
提供されたURLを確認しました。bootstrap.cssファイルを変更したと思います。.modalクラスには「margin：-250px 0 0-280px;」があります。プロパティとコードに「margin-left：-280px」が含まれています。
したがって、オリジナルとして設定します。"マージン：-250px 0 0 -280px;" また、「top：50％」を設定します
次に、JSコードによって生成された「インラインマージン-左css」を削除します
$('#myModal').css({
'margin-left': function () {
return -($(this).width() / 2);
}
});
次に、ページに記述されているカスタムクラスを削除します
.modal{
position: absolute,
margin: 0
}
次に、＃modalの幅を50％に適用します（応答性を高めるには、幅を％で指定する必要があります）。現在900pxで設定していますが、「。modal」クラス「left：50％」属性が定義されているため、画面に収まりません。
left：50％は、bootstrap.cssファイルで定義されているデフォルトの幅560pxで機能しています。
#modal幅を増やすには、.modalクラスの「left」属性を設定する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：Magento AdminConfig設定は保存されません
- 次の投稿：Elasticsearch：オブジェクトフィールドのすべての（おそらく動的な）サブフィールドを文字列として宣言する方法はありますか？
関連記事
Related 関連記事
- 1
ウィンドウのサイズを変更するとブートストラップ モーダルが非表示になる
- 2
ウィンドウのサイズを変更すると、テキストがブートストラップボタンの境界からオーバーフローしたり、ボタンがdiv領域からこぼれたりします。
- 3
ウィンドウのサイズが変更されるまで、ブートストラップモーダル内にGoogleマップをロードすることはできません
- 4
ブラウザウィンドウのサイズが変更されると、ブートストラップ列がオーバーラップします
- 5
ウィンドウのサイズを変更するときに、ブートストラップグリッド内の要素を中央揃えにする
- 6
ウィンドウのサイズを変更するときに、ブートストラップグリッド内の要素を中央揃えにする
- 7
最大値でモーダル ウィンドウの動的幅をブートストラップしますか?
- 8
ブートストラップモーダルウィンドウで機能しない月と年を変更する
- 9
スクロールバーを取得せずにリモートデスクトップウィンドウのサイズを変更する
- 10
ZK：（zk）ウィジェット内にブラウザーウィンドウのサイズ変更リスナーを追加します
- 11
Angularjs-モーダルブートストラップウィンドウからスコープを渡す
- 12
ChartJSは、ウィンドウのサイズが変更されるまで、ブートストラップタブ内にグラフを描画しません
- 13
ブラウザウィンドウのサイズを変更せずに、Bootstrap 3グリッドレイアウトを電話およびタブレットとしてプレビューしますか？
- 14
ブートストラップアコーディオン内のフクロウカルーセル2は、ウィンドウのサイズ変更でのみ機能しますか？
- 15
ブートストラップの折りたたみ時にウィンドウのサイズ変更をトリガーする
- 16
ブラウザウィンドウのサイズが変更された場合に実行するjQueryスクリプトをトリガーします
- 17
ブートストラップモーダルウィンドウの閉じるボタンの色を変更する
- 18
mvc のドロップダウン リストを使用してページ サイズを変更する
- 19
FO-DICOM：C＃Windowsフォームアプリケーションでレンダリングされたビットマップを使用してウィンドウのサイズを変更すると、クラッシュします
- 20
モバイルデバイスのウェブサイトのデザインを変更するか、ブラウザのサイズを変更します
- 21
GitHubからtarballをダウンロードするときにトップレベルディレクトリの名前を変更しますか？
- 22
カウントダウンタイマーにモーダルウィンドウのブートストラップを表示させる
- 23
ウィンドウのサイズ変更時にスライダーJavaScriptをリセットします（jQueryではありません）
- 24
ユーザーがマウスをドラッグするときにJFrameサイズ変更イベントをリッスンしますか？
- 25
ドロップダウンリストコントロールからdatagridviewtextbox列の値を変更します
- 26
ルートを変更してウィンドウのサイズを変更すると、スリックカルーセルの高さがゼロになります
- 27
ブートストラップナビゲーションバーのサイズを小さなブラウジングエリアに変更した後、モーダルの入力フォームが下部にドロップされました
- 28
Rails5前のウィンドウを複製するブートストラップモーダル
- 29
角度2/4のフィルターパイプを介してドロップダウンメニューからngForリストを変更します
コメントを追加