Fehler beim Laden eines Modals

[Dsimon24]

Hallo zusammen,

ich möchte gerne realisieren, dass sich ein Modal nach dem Aufrufen einer Seite automatisch öffnet.

Den folgenden Code habe ich dazu eingebunden:

  <div class="container_body" style="margin-top:80px;">
    
    <!-- Modal -->
    <div id="myModal" class="modal fade" 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>

<script type="text/javascript"> $(window).load(function(){ $('#myModal').modal('show'); }); </script>
    
<script src="js/dropdown.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../classes/wysiwyg/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

Und die folgende Fehlermeldung erhalte ich in der Console: siehe Screen...

Was läuft da schief? Der Code müsste doch korrekt sein, oder?

 

[benneq]

Du solltest deine Skripte in der richtigen Reihenfolge laden.

Erst jQuery, dann bootstrap, dann dein eigenes Zeug.

 

[Dsimon24]

Das war durchaus einfach -
ich danke dir, funktioniert nun! :-)

Eine Unterstützung bräuchte ich aber möglichst nochmal.

Ich habe jetzt den folgenden Code und das Model öffnet sich beim Laden der Seite:

  <?php foreach ($stmt as $nl) { ?>

    <!-- Modal -->
    <div id="myModal" class="modal fade" 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>

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

  <?php } ?>

Wenn ich das Modal schließe, sollte es sich für jedes Element in der Schleife erneut öffnen.
Das funktioniert aber noch nicht. Habe ich hier eventuell einen kleinen Denkfehler?

 

[benneq]

Wenn ich das richtig interpretieren, dann sollte "#myModal" die Ursache sein:
Du erzeugst mit deiner Schleife grausamen HTML Code.

Du hast dort 'id="myModal"' stehen. Und durch die Schleife steht das dann gleich mehrmals im HTML Code.

https://www.w3schools.com/html/html_id.asp
"The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document)."

Durch das $('#myModal').modal('show') weiß der Browser dann nicht welches der Modale du öffnen willst, weil ja alle vollkommen gleich heißen. Für gewöhnlich existiert für den Browser am Ende nur EIN Element mit der ID "myModal" und alle anderen werden ignoriert.

Also sorg einfach dafür, dass jedes Modal seine eigene ID bekommt.

 

[r15ch13]

Mir erschliesst sich zwar nicht der Grund warum man zig Modals beim laden der Seite oeffnen sollte, aber so sollte es gehen:

  <?php foreach ($stmt as $nl) { ?>
    <!-- Modal -->
    <div class="modal fade onload-modal" 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>
  <?php } ?>

  <script type="text/javascript">
    $(window).load(function() {
        $('.onload-modal').each(function(key, el) {
            $(el).modal('show')
        })
    });
  </script>

Die Schleife erstellt die Modals. Mit jQuery suchst du alle Elemente mit der onload-modal-Klasse (kannst du auch anders nennen) und fuehrst bei jedem Element .modal('show') aus.