it-swarm.com.de

Starten Sie Bootstrap Modal beim Laden der Seite

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

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

Ich habe keine Ahnung, wie ich das beim Laden einer Seite aufrufen kann. Mit dem bereitgestellten Code auf der Bootstrap-Seite kann ich das Modal mit einem Elementklick erfolgreich aufrufen, es soll jedoch sofort geladen werden, wenn eine Seite geladen wird.

180
Brandon

Wickeln Sie einfach das Modal, das Sie beim Laden der Seite aufrufen möchten, in ein jQuery load -Ereignis im Kopfabschnitt Ihres Dokuments ein.

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 aufrufen, indem Sie es mit einem Link wie folgt aufrufen:

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

Sie brauchen javascript nicht, um modal anzuzeigen

Der einfachste Weg ist "hide" durch "in" zu ersetzen.

class="modal fade hide"

so

class="modal fade in"

und Sie müssen onclick = "$('.modal').hide()" auf die Schaltfläche close hinzufügen;

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

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

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>

37
GAURAV MAHALE

Sie können diesen lauffähigen 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.

Denke, du hast deine vollständige Antwort.

16
Abrar Jahin

in Bezug auf das, was Andre Ilich sagt, müssen Sie das js-Skript

<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

7
JPCS

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

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

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

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

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

Das schien zu sein, weil der 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 war ebenso erforderlich wie die jQuery oben:

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

Beachten Sie, dass ich versucht habe, die modalen Klassen von modal fade in modal fade in zu ändern. Wenn Sie die Klassen von modal fade in modal show ändern, konnte das Modal nicht geschlossen werden.

5

Heres eine Lösung [ohne Javascript-Initialisierung!]

Ich konnte kein Beispiel finden, ohne dass Ihr Modal mit Javascript initialisiert hat, $('#myModal').modal('show'). Daher ist hier ein Vorschlag, wie Sie es ohne javascript delay beim Laden der Seite implementieren könnten.

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

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

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

  2. Modal-Hintergrund div hinzufügen

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

  3. Skript hinzufügen

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

    Was passiert, ist, dass die HTML-Datei für Ihr Modal beim Laden der Seite ohne Javascript geladen wird (keine Verzögerung). An diesem Punkt können Sie das Modal nicht schließen. Deshalb haben wir das Script document.ready, um das Modal richtig zu laden, wenn alles geladen ist. Wir werden den benutzerdefinierten Code tatsächlich entfernen und dann das Modal (erneut) mit .modal ('show') initialisieren.

5
Reft
<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 auch ohne Javascript beim Start zeigen. Löschen Sie einfach die Klasse "Hide".

class="Modal"
3
SPIELER

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/

3
Felipe Lima

In Bootstrap 3 müssen Sie lediglich das Modal durch js initialisieren und wenn sich im Moment des Ladens der Seite das modale Markup in der Seite befindet, wird das Modal angezeigt.

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

2
Stafie Anatolie

Zusätzlich zu user2545728 und Reft Antworten, ohne Javascript aber mit dem modal-backdrop in

3 Dinge hinzuzufügen

  1. ein div mit den Klassen modal-backdrop in vor der Klasse .modal
  2. style="display:block;" für die Klasse .modal
  3. fade in zusammen mit der Klasse .modal

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

Wie andere bereits erwähnt, erstellen Sie Ihren 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 nicht unbedingt am Ende der Seite sein

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

Um den Dialog dann wieder schließen zu können, fügen Sie diesen hinzu

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

Hoffe das hilft

1
jBelanger

Update 2018 - Bootstrap 4

Das modale Markup wurde für Bootstrap 4 geringfügig geändert. So können Sie das modale beim Laden der Seite öffnen und die Anzeige des modalen Moduls optional 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

1
Zim

Einfaches Beispiel Erstellen 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>
0
ankush

Möglicherweise möchten Sie jquery.js Für ein schnelleres Laden der Seite zurückstellen. Wenn jedoch jquery.js Zurückgestellt wird, funktioniert die Funktion $(window).load möglicherweise nicht. Dann kannst du es versuchen

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

sobald die Seite vollständig geladen ist (einschließlich jquery), erscheint ein Popup Ihres Modals.

0
Viktor Ka

Wenn Sie modal anzeigen möchten, während die Seite noch geladen ist,

Aufruf$("modal_selector").modal("show") innerhalb von $("document").ready() Funktion,

und Schließen dort am $(window).on("load") Ereignis!



Warum?Siehe: https://stackoverflow.com/a/3698214/9438347

0