web-dev-qa-db-ja.com

Twitterのブートストラップモーダルをフルスクリーンにする方法

<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で遊ぼうとしました、しかし、私が望んだようにそれを得ることができませんでした。誰でもそれを手伝ってください。

csscss3twitter-bootstrap
135
Hrishikesh Sardar

私は以下のコードで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では「要素の検査」を選択してください。 「要素」パネルでさまざまなHTML要素を選択し、適切なパディング/スペースが得られるまで右側のCSSをリアルタイムで編集してみてください。

これがライブデモです

これはフィドルへのリンクです

245
Chris J

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

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

.modal-content {
  height: 99%;
}
24
Esteban

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

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

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

11
micjamking

ブートストラップ4の場合は、max-width：noneでメディアクエリーを追加する必要があります。

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

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

.modal-content {
  height: 99%;
}
8
A. Morel

@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;
}
7
kkarli

このトピックに対する以前の回答（@Chris J、@kkarli）に基づいて、私はフルスクリーンモーダル用の「レスポンシブ」ソリューションを思い付きました。

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

.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;
  } 
}

/* 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;
  }
}

/* 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;
  }
}

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

Sassをプリプロセッサとして使用している人は以下のミックスインを利用することができます。

@mixin modal-fullscreen() {
  padding: 0 !important;

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

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

}
6
andreivictor

以下のように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>
2
BenW

ブートストラップ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">
1
Vlad