Comment faire de Twitter bootstrap modal plein écran

<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 twitter bootstrap modal popup en plein écran pour le code ci-dessus, j'ai essayé de jouer avec le css mais n'a pas été en mesure d'obtenir de la façon que je voulais. Quelqu'un peut-il m'aider avec elle.

InformationsquelleAutor Hrishikesh Sardar | 2013-08-25

246

J'ai obtenu ce dans le 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 l'espacement /rembourrage problèmes, essayez droit+clic (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 les différents éléments HTML dans les "éléments" du panneau et de l'édition de CSS sur le droit en temps réel jusqu'à ce que vous obtenez le rembourrage /espacement souhaité.

Voici une démo en live

Voici un lien pour le violon
- Je voudrais aussi ajouter margin: 0 à .modal-dialog.
- BTW: .modal-content 's haute pause lorsque le contenu déborde en bas et faire défiler vers le bas. Il devrait être min-height: 100%; height: auto;
- Si la conception d'une application mobile, vous pouvez mettre de Chris CSS à l'intérieur d'une requête de média pour avoir modale normale largeur pour des écrans plus larges, @media(max-width: 768px) { ... }
- vous pouvez également ajouter .modal { padding: ...px } si vous avez besoin d' "presque" plein écran modal
- N'est-ce aussi travailler pour l'impression? J'ai du mal à imprimer modale complète de la page: stackoverflow.com/questions/41889627/...
- Je pense que .modal-dialog { width: 100%; } est d'accord. Il a travaillé pour moi.
- Peut-être à la recherche de ce noreiller.github.io/bootstrap-modal-carrousel/...
- .modal-dialog doit également max-width: 100%; pour bootstrap 4
InformationsquelleAutor Chris J
24

La solution choisie ne permet pas de conserver la tour d'angle de style.
Afin de préserver les coins ronds, vous devez réduire la largeur et la hauteur un peu et retirez la frontière rayon de 0. Aussi, il n'affiche pas la barre de défilement verticale...
```
.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}
```
- plus de la réponse correcte, qui conserve la sensation de modèle avec des coins arrondis, de la accepté de répondre présente une couche de recouvrement au lieu de modal
- Si le modal est en occupant la totalité de l'écran, il aurait l'air horrible (à mon humble avis) si vous avez des coins ronds autour d'elle.
- Dans le Bootstrap 4, un width: 96% fonctionne très bien ici.
InformationsquelleAutor Esteban
11

La classe suivante sera de faire un plein écran modal dans le Bootstrap:
```
.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}
```
Je ne suis pas sûr de savoir comment le contenu intérieur de votre modal est structuré, ce qui peut avoir un effet sur l'ensemble de la hauteur en fonction de la CSS qui lui est associé.
- qu'est-ce que .plein écran ? J'ai inclus le css dans #myModal il a travaillé pour la largeur mais pas en hauteur.
- .fullscreen est une classe que j'ai créée pour résoudre le problème, il n'est pas inclus dans le Bootstrap. Pouvez-vous poster un échantillon de votre code sur JSFiddle ou CodePen? Je ne peux pas vous aider sans voir votre code.
- pour ajouter de la hauteur, vous devez ajouter de la hauteur sur le modèle du corps pas sur #myModal.
InformationsquelleAutor micjamking

Pour bootstrap 4-je ajouter une media query avec max-width: aucun

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

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

.modal-content {
  height: 99%;
}

InformationsquelleAutor A. Morel

7

La extrait de de @Chris J eu quelques problèmes avec des marges de dépassement et de.
Les modifications proposées par @YanickRochon et @Joana, basé sur la fiddel de @Chris J peuvent être trouvés dans la suite de jsfiddle.

C'est le code CSS qui a fonctionné pour moi:
```
.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}
```
InformationsquelleAutor kkarli

Sur la base des réponses à ce sujet (@Chris J, @kkarli), je suis venu avec un "responsive" solution pour un affichage plein écran des modaux:

Plein écran des Modaux qui peut être activée seulement sur certains points d'arrêt. De cette façon le modal "normal" s'affiche sur une plus large (de bureau) écrans et en plein écran sur les petits (tablette ou mobile) écrans, en lui donnant le sentiment d'une application native.

J'ai créé les classes suivantes doivent être ajoutées à .modal élément:

.modal-fullscreen-md-down - le modal est en plein écran pour les écrans plus petits que 1200px.
.modal-fullscreen-sm-down - le modal est en plein écran pour les écrans plus petits que 922px.
.modal-fullscreen-xs-down - le modal est en plein écran pour un écran plus petit que 768px.

Prendre un coup d'oeil 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;
} 
}
/* 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;
}
}

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

Ceux qui l'utilisation de Sass comme un préprocesseur pouvez profiter des services suivants mixin:

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

InformationsquelleAutor andreivictor

Vous devez définir vos balises DIV comme ci-dessous.

Trouver le plus de détails > 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>

InformationsquelleAutor BenW

pour bootstrap 4

ajouter des classes :

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

et en HTML :

<div role="document" class="modal-dialog full_modal-dialog">
<div class="modal-content full_modal-content">

InformationsquelleAutor Vlad

-1

Mon variation de la solution:
(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%;
}

InformationsquelleAutor Dementic

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

Essayer d'expliquer plus clairement pourquoi c'est une réponse à la question.

InformationsquelleAutor Alireza Pars

-1

Utiliser Ceci:

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

et donc:

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

InformationsquelleAutor hojjat.mi

Vous devez vous connecter pour publier un commentaire.