Starten Sie Bootstrap Modal beim Laden der Seite

Ich kenne Javascript überhaupt nicht. Die Bootstrap-Dokumentation sagt zu

Rufen Sie das Modal über Javascript auf: $ ('# myModal'). Modal (Optionen)

Ich habe keine Ahnung, wie ich das beim Laden einer Seite aufrufen soll. Mit dem auf der Bootstrap-Seite angegebenen Code kann ich das Modal bei einem Elementklick erfolgreich aufrufen, möchte aber, dass es beim Laden einer Seite sofort geladen wird.

Schließen Sie einfach das Modal, das Sie beim Laden der Seite aufrufen möchten, in ein jQuery- loadEreignis im Kopfbereich Ihres Dokuments ein, und es sollte wie folgt angezeigt werden:

JS

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Sie können das Modal innerhalb Ihrer Seite weiterhin mit aufrufen, indem Sie es mit einem Link wie folgt aufrufen:

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Du brauchst nicht javascript modal zeigen

Der einfachste Weg ist, "verstecken" durch "in" zu ersetzen.

class="modal fade hide"

so

class="modal fade in"

und du musst hinzufügen onclick = "$('.modal').hide()" Schaltfläche zum .

PS: Ich denke, der beste Weg ist, ein jQuery-Skript hinzuzufügen:

$('.modal').modal('show');

Fügen Sie einfach Folgendes hinzu:

class="modal show"

Arbeitsbeispiel-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal show" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Sie können diesen ausführbaren Code ausprobieren.

$(window).load(function()
{
    $('#myModal').modal('show');
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Mehr finden Sie hier .

Denken Sie, Sie haben Ihre vollständige Antwort.

In Bezug auf das, was Andre's Ilich sagt, müssen Sie das js-Skript nach der Zeile in der so genannten jquery hinzufügen:

<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
     $(window).load(function(){
         $('#myModal').modal('show');
      });
</script>

In meinem Fall war das das Problem, hoffe es hilft

In meinem Fall hat das Hinzufügen von jQuery zur Anzeige des Modals nicht funktioniert:

$(document).ready(function() {
    $('#myModal').modal('show');
});

Das schien daran zu liegen, dass das Modal das Attribut aria-hidden = "true" hatte:

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Das Entfernen dieses Attributs sowie der obigen jQuery war erforderlich:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Beachten Sie, dass ich versucht habe, die Modalklassen von auf modal fadezu ändern modal fade in, und das hat nicht funktioniert. Durch das Ändern der Klassen von modal fadein wurde verhindert modal show, dass das Modal geschlossen werden kann.

Hier ist eine Lösung [ohne Javascript-Initialisierung!]

Ich konnte kein Beispiel finden, ohne Ihr Modal mit Javascript zu initialisieren. Hier ist $('#myModal').modal('show')ein Vorschlag, wie Sie es ohne Javascript-Verzögerung beim Laden der Seite implementieren können.

1. Bearbeiten Sie Ihr modales Container-Div mit Klasse und Stil:

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

2. Bearbeiten Sie Ihren Körper mit Klasse und Stil:

   <body class="modal-open" style="padding-right:17px;">

3. Modal-Hintergrund div hinzufügen

   <div class="modal-backdrop in"></div>

4. Skript hinzufügen

   $(document).ready(function() {
       $('body').css('padding-right', '0px');
       $('body').removeClass('modal-open');
       $('.modal-backdrop').remove();
   
       $('#MyModal').modal('show'); });

   Was passieren wird, ist, dass das HTML für Ihr Modal beim Laden der Seite ohne Javascript geladen wird (keine Verzögerung). Zu diesem Zeitpunkt können Sie das Modal nicht schließen. Aus diesem Grund haben wir das Skript document.ready, um das Modal ordnungsgemäß zu laden, wenn alles geladen ist. Wir werden den benutzerdefinierten Code tatsächlich entfernen und dann das Modal (erneut) mit dem .modal ('show') initialisieren.

Sie können das Modal aktivieren, ohne JavaScript einfach über Datenattribute zu schreiben.

Die auf "true" gesetzte Option "show" zeigt das Modal bei der Initialisierung an:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

Wie andere bereits erwähnt haben, erstellen Sie Ihr Modal mit display: block

<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...

Platzieren Sie den Hintergrund an einer beliebigen Stelle auf Ihrer Seite. Er muss sich nicht unbedingt am unteren Rand der Seite befinden

<div class="modal-backdrop fade show"></div> 

Fügen Sie dies hinzu, um den Dialog wieder schließen zu können

<script>
    $("button[data-dismiss=modal]").click(function () {
        $(".modal.in").removeClass("in").addClass("fade").hide();
        $(".modal-backdrop").remove();
    });
</script>

Hoffe das hilft

Getestet mit Bootstrap 3 und jQuery (2.2 und 2.3)

$(window).on('load',function(){
  $('#myModal').modal('show');
});



<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><i class="fa fa-exclamation-circle"></i>&nbsp; //Your modal Title</h4>
        </div>
        <div class="modal-body">
          //Your modal Content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>

    </div>
</div>

https://jsfiddle.net/d7utnsbm/

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

Sie können es beim Start auch ohne Javascript anzeigen. Löschen Sie einfach die Klasse "verstecken".

class="Modal"

Zusätzlich zu den Antworten von user2545728 und Reft, ohne Javascript, aber mit demmodal-backdrop in

3 Dinge hinzuzufügen

1. ein div mit den Klassen modal-backdrop invor der .modal-Klasse
2. style="display:block;" zur .modal Klasse
3. fade in zusammen mit der .modal Klasse

Beispiel

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>

Update 2020 - Bootstrap 4

Das Modal-Markup hat sich für Bootstrap 4 geringfügig geändert. So können Sie das Modal beim Laden der Seite öffnen und optional die Anzeige des Modals verzögern ...

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds

    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

Demo auf Codeply

In Bootstrap 3 müssen Sie nur das Modal über js initialisieren. Wenn sich im Moment des Seitenladens das Modal-Markup auf der Seite befindet, wird das Modal angezeigt.

Wenn Sie dies verhindern möchten, verwenden Sie die Option, mit der show: falseSie das Modal initialisieren. Etwas wie das: $('.modal').modal({ show: false })

Möglicherweise möchten Sie jquery.jsfür ein schnelleres Laden der Seite zurückgestellt bleiben . Wenn dies jquery.jsjedoch verschoben wird, $(window).loadfunktioniert dies möglicherweise nicht. Dann können Sie es versuchen

setTimeout(function(){$('#myModal').modal('show');},3000);

Es wird Ihr Modal angezeigt, nachdem die Seite vollständig geladen wurde (einschließlich jquery).

Um zu vermeiden, dass der Bootstrap übersteuert wird und seine Funktionalität verliert, erstellen Sie einfach eine reguläre Startschaltfläche, geben Sie ihm eine ID und klicken Sie mit jquery darauf, wie folgt: Die Startschaltfläche:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

Der jQuery-Trigger:

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

Ich hoffe es hilft. Prost!

Einfaches Beispiel Machen Sie einen Loader-Spinner aus einem Bootstrap-Modal

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
  $('#myModal').modal('show'); 
  setTimeout(function(){
  $('#myModal').modal('hide'); 
  }, 5000);
   });
  </script>
  <style>
.loader {
  border: 13px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-dialog{
width: 150px;
    margin: 10% auto;
}
.modal-content{
background-color: transparent; 
   border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}
</style>
</head>
<body>

<div class="container">

  <!-- Modal -->
  <div class="modal fade" data-backdrop="static" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-body">
         <div class="loader"></div>
        </div>

      </div>

    </div>
  </div>

</div>

</body>
</html>