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

  • 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.

  • 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?

  • 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
    1. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#designModal">
    2. UX/UI Designer
    3. </button>

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

    Und das Javascript unten kannst Du dann löschen:

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

  • 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
    1. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#designModal">
    2. UX/UI Designer
    3. </button>

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

    Und das Javascript unten kannst Du dann löschen:

    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 ^^:thumbup: