Twitterブートストラップモーダルを全画面表示にする方法

160 
<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ブートストラップモーダルポップアップを全画面表示にするにはどうすればよいですか。CSSをいじってみましたが、思い通りにできませんでした。誰かが私を助けてくれますか？

css  twitter-bootstrap 
— フリシケシサルダール
ソース

回答:

280

これは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をリアルタイムで編集して、必要なパディング/スペーシングを取得します。

こちらがライブデモです

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

— クリス・J
ソース
12
にも追加margin: 0し.modal-dialogます。
— harrison4 2014年
10
ところで.modal-content、コンテンツが下部でオーバーフローして下にスクロールすると、が非常に壊れます。それはする必要がありますmin-height: 100%; height: auto;
— Yanick Rochon 2015
3
モバイルアプリ用に設計する場合は、ChrisのCSSをメディアクエリ内に配置して、より広い画面で通常のモーダル幅を使用できます@media（max-width：768px）{...}
— Nicolas Connault
「ほぼ」全画面モーダルが必要な場合は、.modal {padding：... px}を追加することもできます
— andrii
8
.modal-dialogまた、必要max-width: 100%;のためのブートストラップ4
— アナンドRockzz
25

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

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

.modal-content {
  height: 99%;
}
— エステバン
ソース
1
丸みを帯びたモデルの感触を保持する、より正確な解答。受け入れられた解答は、モーダルではなくオーバーレイレイヤーを示します
— Clain Dsilva
モーダルが全画面を占めている場合、その周りに丸い角があると、モーダルは恐ろしく見えます（私見）。
— 認知症
16

ブートストラップ4の場合、max-widthを指定してメディアクエリを追加する必要があります：なし

@media (min-width: 576px) {
  .modal-dialog { max-width: none; }
}

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

.modal-content {
  height: 99%;
}
— A.モレル
ソース
16

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

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

Bootstrap 3およびBootstrap 4用に実装されています。

ブートストラップ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;
}

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

+---------------+---------+---------+---------+---------+---------+
|               |   xs    |   sm    |   md    |   lg    |   xl    | 
|               | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen    |  100%   | default | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------+---------+---------+---------+---------+---------+
|.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 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;
  }

}
— andreivictor
ソース
11

次のクラスは、Bootstrapで全画面モーダルを作成します。

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

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

— ミチャムキング
ソース
.fullscreenとは何ですか？#myModalにCSSを含めましたが、高さではなく幅で機能しました。
— Hrishikesh Sardar 2013
.fullscreenこの問題を解決するために作成したクラスであり、Bootstrapには含まれていません。JSFiddleまたはCodePenにコードのサンプルを投稿できますか？私はあなたのコードを見ずにあなたを助けることはできません。
— マイクジャッキング2013
高さを追加するには、＃myModalではなくモデル本体に高さを追加する必要があります。
— QasimRamzan、2015年
9

ブートストラップ用4

クラスを追加：

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

そしてHTMLで：

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">
— ヴラド
ソース
7

@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;
}
— クカルリ
ソース
2

以下のように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>
— BenW
ソース
-1

私のソリューションのバリエーション：（scss）

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

（css）

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}
— 認知症
ソース
-1 
.modal.in .modal-dialog {
 width:100% !important; 
 min-height: 100%;
 margin: 0 0 0 0 !important;
 bottom: 0px !important;
 top: 0px;
}


.modal-content {
    border:0px solid rgba(0,0,0,.2) !important;
    border-radius: 0px !important;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
    height: auto;
    min-height: 100%;
}

.modal-dialog {
 position: fixed !important;
 margin:0px !important;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important;
}


@media (min-width: 768px)
.modal-dialog {
    width: 100% !important;
    margin: 0 !important;
}
— アリレザ・パース
ソース
2
これが質問に対する答えである理由をより明確に説明してください。
— Jeroen Heier
-1

これを使って：

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

など：

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog modal-full">
        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header ">                    
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>
— hojjat.mi
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.