Comment rendre la modale Twitter bootstrap plein écran ?

Question

<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>

Comment puis-je faire un popup modal twitter bootstrap plein écran pour le code ci-dessus, j'ai essayé de jouer autour avec css mais n'a pas été en mesure d'obtenir la façon dont je voulais. Quelqu'un peut-il m'aider ?

Answer 1

J'ai obtenu ce résultat dans Bootstrap 3 avec le code suivant :

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

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

En général, lorsque vous avez des questions sur des problèmes d'espacement ou de remplissage, essayez de faire un clic droit (ou cmd+clic sur mac) sur l'élément et sélectionnez "inspecter l'élément" sur Chrome ou "inspecter l'élément avec firebug" sur Firefox. Essayez de sélectionner différents éléments HTML dans le panneau "elements" et modifiez le CSS à droite en temps réel jusqu'à ce que vous obteniez l'espacement/le rembourrage souhaité.

Voici une démo en direct

Voici un lien vers le violon

Answer 2

J'ai trouvé une solution "responsive" pour les modales plein écran :

Modèles plein écran qui peuvent être activés uniquement sur certains points d'arrêt . De cette manière la modale s'affichera "normalement" sur les écrans plus larges (bureau) et en plein écran sur les écrans plus petits (tablette ou mobile). ce qui lui donne l'impression d'être une application native.

Mis en œuvre pour Bootstrap 3 y Bootstrap 4 . Inclus par défaut dans Bootstrap 5 .

---

Bootstrap v5

Les modales plein écran sont incluses par défaut dans Bootstrap 5 : https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal

---

Bootstrap v4

Le code générique suivant devrait fonctionner :

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

En incluant le code scss ci-dessous, il génère les classes suivantes qui doivent être ajoutées à l'élément .modal élément :

+---------------------+---------+---------+---------+---------+---------+
|                     |   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%   |
+---------------------+---------+---------+---------+---------+---------+

Le code scss est :

@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();
    }
  }
}

Démonstration sur Codepen : https://codepen.io/andreivictor/full/MWYNPBV/

---

Bootstrap v3

D'après les réponses précédentes à ce sujet (@Chris J, @kkarli), le code générique suivant devrait fonctionner :

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

Si vous voulez utiliser des modales plein écran réactives, utilisez les classes suivantes qui doivent être ajoutées à .modal élément :

• .modal-fullscreen-md-down - la modale est en plein écran pour les écrans plus petits que 1200px .
• .modal-fullscreen-sm-down - la modale est en plein écran pour les écrans plus petits que 922px .
• .modal-fullscreen-xs-down - la modale est plein écran pour les écrans plus petits que 768px .

Jetez un coup d'œil au code suivant :

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

La démo est disponible sur Codepen : https://codepen.io/andreivictor/full/KXNdoO .

Ceux qui utilisent Sass comme préprocesseur peuvent tirer parti du mixin suivant :

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

}

Answer 3

La solution choisie ne préserve pas le style des coins arrondis. Pour conserver les coins arrondis, vous devriez réduire un peu la largeur et la hauteur et supprimer le rayon de bordure 0. De plus, la barre de défilement verticale n'apparaît pas...

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

.modal-content {
  height: 99%;
}

Answer 4

Pour bootstrap 4, je dois ajouter une requête média avec max-width : none.

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

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

.modal-content {
  height: 99%;
}

Answer 5

La classe suivante permet de créer une modale plein écran dans Bootstrap :

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

Je ne sais pas comment est structuré le contenu interne de votre modale, cela peut avoir un effet sur la hauteur globale en fonction du CSS qui lui est associé.