Bootstrap Modal mit JavaScript erneut öffnen

Hallo Zusammen,

ich bin relativ neu in der Programmierarbeit mit Javascript und habe deshalb nur rudimentäre Kenntnisse. Derzeit arbeite ich an einer Website, auf der ich mit Bootstrap ein Modal eingebaut habe. Ich habe es geschafft mit JavaScript ein automatisches Öffnen und Schließen des Modals nach ein paar Sekunden zu generieren. Nur kann ich das Modal nach dem Schließen nun nicht mehr manuell öffnen. Also der Button hat keine Funktion mehr. Ich hoffe es ist einigermaßen verständlich formuliert, wie gesagt ich bin ein ziemlicher Neueinsteiger. Ich freue mich, wenn mir jemand helfen kann.

viele Grüße

Html-Button: 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  UX/UI Designer 
</button>


<div class="modal fade" id="designModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">UX/UI (User Experience, User Interface)</h5>
        <button type="button " class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       Produkt 
      <img src="Bilder/screen" > </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
        
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    
    <script>


    $(document).ready(function () {
        setTimeout(function() {
            $("#designModal").modal ('show');
        }, 500);
    })
    
    setTimeout(function() {
        $("#designModal").modal('hide');
    }, 10000);

    </script>
    
    <script>
    
    var modal = document.getElementById("#designModal");
    var modalBtn = document.getElementsByClassName("btn-primary");
    

    
    modalBtn.onclick = function (){
    modal.style.display = "block";
         
    }


    </script>


</body>    
    
</html>

Zitat von Sempervivum

Schau mal hier unter "Methods":

https://getbootstrap.com/docs/4.0/components/modal/#methods

Es gibt da Methoden, das Modal so sichtbar und unsichtbar zu machen, wie es von Bootstrap vorgesehen ist, show und hide.

Edit: Ups, da habe ich nicht genau genug gelesen, diese Methoden benutzt Du ja schon. Dann scheitert es wahrscheinlich an dem modalBtn.onclick, Wenn Du da ebenfalls show() oder toggle() verwendest, solle es funktionieren.

Das funktioniert leider nicht bei mir. Wie genau meinst du? Also eine neue Funktion definieren?

Zitat von Sempervivum

jonas3344 hat vollkommen Recht: Das Ganze besser mit den Mitteln von Bootstrap lösen, d. h. Du musst deinem Button die ID des Modals mitteilen indem Du sie unter data-target einträgst:

Code

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#designModal">
  UX/UI Designer 
</button>

Dann funktioniert das Öffnen und Schließen ganz von allein.

Und das Javascript unten kannst Du dann löschen:

Code

<script>
    
    var modal = document.getElementById("#designModal");
    var modalBtn = document.getElementsByClassName("btn-primary");
    
    
    modalBtn.onclick = function (){
    modal.style.display = "block";
         
    }
</script>

Alles anzeigen

So getestet und funktioniert einwandfrei. Auch den Knopf für das Schließen legt Bootstrap automatisch an.

Super, vielen Dank!

Das freut mich gerade richtig. Hab so lange rumprobiert, dabei war es ganz banal!

Schönen Abend