web-dev-qa-db-fra.com

Comment faire de Twitter bootstrap modal en 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 créer un Twitter bootstrap _ popup modal en plein écran pour le code ci-dessus, j'ai essayé de jouer avec css mais je n'ai pas réussi à le faire comme je le voulais. Quelqu'un peut-il m'aider s'il vous plaît avec cela.

csscss3twitter-bootstrap
141
Hrishikesh Sardar

J'ai réalisé ceci 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 les problèmes d'espacement/remplissage, essayez de cliquer avec le bouton droit de la souris sur l'élément et sélectionnez "inspecter élément" sur Chrome ou "inspecter élément avec firebug" sur Firefox. . Essayez de sélectionner différents éléments HTML dans le panneau "éléments" et de modifier le code CSS de droite en temps réel jusqu'à ce que vous obteniez le remplissage/espacement souhaité.

Voici une démonstration en direct

Voici un lien vers le violon

250
Chris J

La solution choisie ne conserve pas le style des coins arrondis. Pour préserver les coins arrondis, vous devez réduire un peu la largeur et la hauteur et supprimer le rayon de la bordure 0. De plus, la barre de défilement verticale n'est pas affichée ...

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

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

La classe suivante créera un modal plein écran dans Bootstrap:

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

Je ne suis pas sûr de la structure du contenu interne de votre modal. Cela peut avoir un effet sur la hauteur totale en fonction du CSS qui lui est associé.

11
micjamking

Pour bootstrap 4, je dois ajouter une requête multimé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%;
}
11
A. Morel

Le extrait de @Chris J avait quelques problèmes de marge et de débordement. Les modifications proposées par @YanickRochon et @Joana, basées sur le fiddel de @Chris J peuvent être trouvées dans le suivant 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;
}
7
kkarli

Sur la base des réponses précédentes à ce sujet (@Chris J, @kkarli), j'ai mis au point une solution "réactive" pour les modaux en plein écran:

Plein écran Modaux activables uniquement sur certains points d'arrêt . De cette manière , le modal affichera "normal" sur des écrans plus larges (de bureau) et plein écran sur des écrans plus petits (tablettes ou mobiles) , ce qui lui donnera le sentiment de une application native.

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

  • .modal-fullscreen-md-down - le modal est plein écran pour les écrans plus petits que 1200px.
  • .modal-fullscreen-sm-down - le modal est plein écran pour les écrans plus petits que 922px.
  • .modal-fullscreen-xs-down - le modal est plein écran pour les écrans dont la taille est inférieure à 768px.

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

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

Ceux qui utilisent Sass en tant que pré-processeur peuvent profiter du mixin suivant:

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

}
7
andreivictor

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">
4
Vlad

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

Trouvez 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>
2
BenW