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

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

Answer 2

El extrait de @Chris J avait quelques problèmes avec les marges et le débordement. Les changements proposés par @YanickRochon et @Joana, basés sur les modifications apportées par @Chris J, sont les suivants 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;
}

Answer 3

Pour bootstap 4.5 : J'ai juste copié ce code de bootstap 5.scss à mon sass et c'est étonnant :

@media (max-width: 1399.98px) 
  .modal-fullscreen-xxl-down 
    width: 100vw
    max-width: none
    height: 100%
    margin: 0

  .modal-fullscreen-xxl-down .modal-content 
    height: 100%
    border: 0
    border-radius: 0

  .modal-fullscreen-xxl-down .modal-header 
    border-radius: 0

  .modal-fullscreen-xxl-down .modal-body 
    overflow-y: auto

  .modal-fullscreen-xxl-down .modal-footer 
    border-radius: 0

Pour le html :

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-xxl-down">
  ...
</div>

Il s'agit de contrôler la marge, la largeur et la hauteur de la division droite.

Answer 4

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>

Answer 5

.modal {
        padding: 0 !important;
    }
        .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;
        }

Cela fonctionne parfaitement dans mon cas. Merci beaucoup.