Come rendere Twitter bootstrap modale a schermo intero

160

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

Come faccio a creare un pop-up modale pop-up Twitter bootstrap per il codice sopra, ho provato a giocare con CSS ma non sono riuscito a farlo come volevo. Qualcuno può aiutarmi per favore con esso.

css twitter-bootstrap

— Hrishikesh Sardar
fonte

280

Ho raggiunto questo obiettivo in Bootstrap 3 con il seguente codice:

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

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

In generale, quando hai domande su problemi di spaziatura / riempimento, prova a fare clic con il tasto destro + (o cmd + clic su mac) sull'elemento e seleziona "ispeziona elemento" su Chrome o "ispeziona elemento con firebug" su Firefox. Prova a selezionare diversi elementi HTML nel pannello "elementi" e modifica il CSS a destra in tempo reale fino a ottenere il riempimento / spaziatura desiderato.

Ecco una demo dal vivo

Ecco un link al violino

— Chris J
fonte

12

Vorrei anche aggiungere margin: 0a .modal-dialog.

— harrison4,

10

A proposito: .modal-contentla grande pausa quando il contenuto trabocca in basso e scorre verso il basso. Dovrebbe esseremin-height: 100%; height: auto;

— Yanick Rochon,

3

Se stai progettando per un'app mobile, puoi inserire il CSS di Chris all'interno di una query multimediale per avere una larghezza modale normale per schermi più grandi @media (larghezza massima: 768px) {...}

— Nicolas Connault

puoi anche aggiungere .modal {padding: ... px} se hai bisogno di "quasi" modal a schermo intero

— andrii

8

.modal-dialognecessita anche max-width: 100%;di bootstrap 4

— Anand Rockzz

25

La soluzione scelta non conserva lo stile degli angoli arrotondati. Per preservare gli angoli arrotondati, è necessario ridurre leggermente la larghezza e l'altezza e rimuovere il raggio del bordo 0. Inoltre non mostra la barra di scorrimento verticale ...

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

.modal-content {
  height: 99%;
}

— Esteban
fonte

1

una risposta più corretta che mantiene la sensazione del modello con gli angoli arrotondati, la risposta accettata presenta un livello di sovrapposizione anziché modale

— Clain Dsilva,

Se il modale sta occupando lo schermo intero, sembrerebbe orribile (IMHO) se ci sono angoli arrotondati attorno ad esso.

— Demenza

16

Per bootstrap 4 devo aggiungere media query con max-width: nessuna

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

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

.modal-content {
  height: 99%;
}

— A. Morel
fonte

16

Ho trovato una soluzione "reattiva" per i modali a schermo intero:

Modali a schermo intero che possono essere abilitati solo su determinati punti di interruzione . In questo modo il modale visualizzerà "normale" su schermi più grandi (desktop) e schermo intero su schermi più piccoli (tablet o dispositivi mobili) , dandogli la sensazione di un'app nativa.

Implementato per Bootstrap 3 e Bootstrap 4 .

Bootstrap v4

Il seguente codice generico dovrebbe funzionare:

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

Includendo il seguente codice scss, genera le seguenti classi che devono essere aggiunte .modalall'elemento:

+---------------+---------+---------+---------+---------+---------+
|               |   xs    |   sm    |   md    |   lg    |   xl    | 
|               | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen    |  100%   | default | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-xl |  100%   |  100%   |  100%   |  100%   |  100%   |
+---------------+---------+---------+---------+---------+---------+

Il codice scss è:

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

Demo su Codepen: https://codepen.io/andreivictor/full/MWYNPBV/

Bootstrap v3

Sulla base delle risposte precedenti a questo argomento (@Chris J, @kkarli), dovrebbe funzionare il seguente codice generico:

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

Se si desidera utilizzare modali a schermo intero reattivi, utilizzare le seguenti classi che devono essere aggiunte .modalall'elemento:

.modal-fullscreen-md-down- il modale è a schermo intero per schermi più piccoli di 1200px.
.modal-fullscreen-sm-down- il modale è a schermo intero per schermi più piccoli di 922px.
.modal-fullscreen-xs-down- il modale è a schermo intero per schermo più piccolo di 768px.

Dai un'occhiata al seguente codice:

/* 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 demo è disponibile su Codepen: https://codepen.io/andreivictor/full/KXNdoO .

Chi utilizza Sass come preprocessore può usufruire del seguente mixin:

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

}

— andreivictor
fonte

11

La seguente classe renderà un modale a schermo intero in Bootstrap:

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

Non sono sicuro di come sia strutturato il contenuto interno del tuo modale, questo potrebbe avere un effetto sull'altezza complessiva a seconda del CSS ad esso associato.

— micjamking
fonte

che cos'è .fullscreen? Ho incluso il CSS in #myModal ha funzionato per la larghezza ma non per l'altezza.

— Hrishikesh Sardar,

.fullscreenè una classe che ho creato per risolvere il problema, non è inclusa in Bootstrap. Puoi pubblicare un campione del tuo codice su JSFiddle o CodePen ? Non posso aiutarti senza vedere il tuo codice.

— Micjamking,

per aggiungere l'altezza devi aggiungere l'altezza sul corpo del modello non su #myModal.

— QasimRamzan,

9

per bootstrap 4

aggiungi classi:

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

e in HTML:

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

— Vlad
fonte

7

Il snippet di @Chris J ha avuto alcuni problemi con margini e overflow. Le modifiche proposte da @YanickRochon e @Joana, basate sul violino di @Chris J, sono disponibili nel seguente jsfiddle .

Questo è il codice CSS che ha funzionato per me:

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

— kkarli
fonte

2

È necessario impostare i tag DIV come di seguito.

Scopri maggiori dettagli> 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>

— BenW
fonte

-1

La mia variazione della soluzione: (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%;
}

— Dementic
fonte

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

— Alireza Pars
fonte

2

Prova a spiegare più chiaramente perché questa è una risposta alla domanda.

— Jeroen Heier,

-1

Usa questo:

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

.modal-full .modal-content {
    min-height: 100vh;
}

e così:

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

— hojjat.mi
fonte