190 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

上記のコードで Twitter ブートストラップ モーダル ポップアップを全画面表示にする方法を教えてください。誰でも私を助けてくれませんか。

4

14 に答える 14

314

次のコードを使用して、Bootstrap 3 でこれを実現しました。

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

一般に、スペーシング/パディングの問題について質問がある場合は、要素を右クリック (Mac では cmd + クリック) してみて、Chrome では「要素を検査」を選択し、Firefox では「firebug を使用して要素を検査」を選択します。「要素」パネルでさまざまな HTML 要素を選択し、必要なパディング/スペースが得られるまで、右側の CSS をリアルタイムで編集してみてください。

ライブデモはこちら

ここにフィドルへのリンクがあります

于 2013-08-29T23:04:00.990 に答える
70

フルスクリーンモーダルの「レスポンシブ」ソリューションを思いつきました：

特定のブレークポイントでのみ有効にできるフルスクリーン モーダル。このようにして、モーダルは、より広い (デスクトップ) 画面では「通常」を表示し、小さい (タブレットまたはモバイル) 画面ではフルスクリーンで表示し、ネイティブ アプリの感覚を与えます。

Bootstrap 3およびBootstrap 4に実装されています。デフォルトでBootstrap 5に含まれています。

ブートストラップ v5

フルスクリーン モーダルはデフォルトでBootstrap 5に含まれています: https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal

ブートストラップ v4

次の一般的なコードが機能するはずです。

.modal {
  padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal .modal-body {
  overflow-y: auto;
}

.modal以下の scss コードを含めることにより、要素に追加する必要がある次のクラスが生成されます。

+---------------------+---------+---------+---------+---------+---------+
|                     |   xs    |   sm    |   md    |   lg    |   xl    | 
|                     | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen    |  100%   | default | default | default | default | 
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------------+---------+---------+---------+---------+---------+
|.modal-fullscreen-xl |  100%   |  100%   |  100%   |  100%   |  100%   |
+---------------------+---------+---------+---------+---------+---------+

scss コードは次のとおりです。

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-body {
    overflow-y: auto;
  }

}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .modal-fullscreen#{$infix} {
      @include modal-fullscreen();
    }
  }
}

Codepen のデモ: https://codepen.io/andreivictor/full/MWYNPBV/

ブートストラップ v3

このトピックに対する以前の回答 (@Chris J、@kkarli) に基づいて、次の一般的なコードが機能するはずです。

.modal {
  padding: 0 !important; // override inline padding-right added from js
}

.modal .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal .modal-content {
  height: auto;
  min-height: 100%;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
}

.modalレスポンシブ フルスクリーン モーダルを使用する場合は、要素に追加する必要がある次のクラスを使用します。

  • .modal-fullscreen-md-down- モーダルは より小さい画面ではフルスクリーンです1200px。
  • .modal-fullscreen-sm-down- モーダルは より小さい画面ではフルスクリーンです922px。
  • .modal-fullscreen-xs-down- モーダルは より小さい画面のフルスクリーンです768px。

次のコードを見てください。

/* Extra small devices (less than 768px) */
@media (max-width: 767px) {
  .modal-fullscreen-xs-down {
    padding: 0 !important;
  }
  .modal-fullscreen-xs-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-xs-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  } 
}

/* Small devices (less than 992px) */
@media (max-width: 991px) {
  .modal-fullscreen-sm-down {
    padding: 0 !important;
  }
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Medium devices (less than 1200px) */
@media (max-width: 1199px) {
  .modal-fullscreen-md-down {
    padding: 0 !important;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

デモは Codepen で入手できます: https://codepen.io/andreivictor/full/KXNdoO。

Sass をプリプロセッサとして使用する場合は、次の mixin を利用できます。

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }

}
于 2017-09-23T17:55:35.883 に答える
27

選択したソリューションでは、角を丸くするスタイルが保持されません。丸い角を維持するには、幅と高さを少し減らし、境界線の半径 0 を削除する必要があります。また、垂直スクロール バーも表示されません...

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}
于 2014-04-03T10:11:56.550 に答える
11

次のクラスは、Bootstrap でフルスクリーン モーダルを作成します。

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

モーダルの内部コンテンツがどのように構成されているかわかりません。これは、関連付けられている CSS によっては全体の高さに影響を与える可能性があります。

于 2013-08-25T19:08:28.940 に答える
8

@Chris Jのスニペットには、マージンとオーバーフローに関するいくつかの問題がありました。@Chris J からの fiddel に基づく @YanickRochon と @Joana による提案された変更は、次のjsfiddleにあります。

それが私のために働いたCSSコードです：

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}
于 2015-11-30T15:08:57.257 に答える
1

以下のように DIV タグを設定する必要があります。

詳細を確認する > http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>
于 2015-05-15T01:04:48.750 に答える
0

**Modal を通常よりも大きくしたい場合は、.css コードを記述する必要はありません。ブートストラップ モーダルのクラスを直接記述できます **

<div class="modal fade" id="mappingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">

modal-dialog modal-xlと完了のみ。

于 2021-07-12T08:22:28.383 に答える