Wie machen modalen dialog öffnen beim laden der Seite in der bootstrap

Es ist leicht zu zeigen ein modales Dialogfeld mit dem javascript auf Bootstrap.

Aber wie das modale öffnen beim laden der Seite ohne die Notwendigkeit eines document.ready Funktion oder ein Körper onload Funktion?

Mein Bedürfnis ist, eine Seite zu laden und haben das modale bereits geöffnet.
Ich will nicht eine Verzögerung noch ein transition-Effekt beim laden der Seite.
Ich will, dass der modal geöffnet wird beim Start.

Blick ich das modal.js ein wenig und versucht, indem class="modal-open" auf den Körper ohne Wirkung.

<div class="modal in" id="journalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">modal title</h4>
      </div>
      <div class="modal-body">
         body
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Ist es möglich?
Wie es zu tun ?

InformationsquelleAutor fluminis | 2014-01-02
  1. 13

    Beim modal wird sichtbar, Bootstrap, ergänzt .in - Klasse, um die es im container. So fügen Sie eine Regel in der css wie unten, und fügen Sie der gleichen Klasse-über die modal -, die Sie wollen sichtbar sein, die Seite laden.

    CSS

    .modal.in {
   display:block;
}

    HTML

    <div class="modal in">visible on page load.</div>

    Aber diese wird nicht bringen den modalen hintergrund statt. Also du musst immer auch diejenigen an der Unterseite von der Seite: 

    <div class="modal-backdrop fade in"></div>
    • Funktioniert wie ein Charme! Ich musste Sie nur entfernen Sie die fade-Klasse, für den modalen hintergrund nicht ganz dunkel. <div class="modal-backdrop in"></div>
    • Das funktioniert nicht in der Bootstrap-4
    InformationsquelleAutor Shekhar K. Sharma
  2. 8

    Haben Sie einen Blick auf diese Starten Sie Bootstrap Modal auf die Seite laden von Andres Ilich

    JS

    <script type="text/javascript">    
    $(window).load(function(){
        $('#myModal').modal('show');
    });
</script>
    • Der Autor explizit nach einer Lösung gefragt, nicht erforderlich ist, ist mit 'die Notwendigkeit einer document.ready Funktion oder ein Körper onload - Funktion'. Ich halte $(window).load zu werden, viel die gleiche wie onload, daher auch der downvote.
    • dennoch nützlich für einige - auch $(window).load(... ersetzt werden durch $(windows).auf('load', ....) für moderne Versionen von jQuery. um loszuwerden, die "fade" - Effekt entfernen Sie die "fade" - Klasse aus modal
    InformationsquelleAutor Nishant
Schreibe einen Kommentar