webentwicklung-frage-antwort-db.com.de

Bootstrap 4 .modal ('hide') funktioniert nicht

Ich erstelle ein wirklich einfaches, aber etwas optimiertes Modal für die Darstellung eines iFrames. Ich öffne das Modell durch eine Javascript-Funktion und die modale Aufruf-Funktion, die von bootstrap bereitgestellt wird. In meinem Modal habe ich ein Symbol zum Schließen des Modals eingefügt. Wenn ich auf dieses Schließen-Symbol klicke, wird der Modal nicht ausgeblendet. Ich benutze ein Javascript-Onclick mit den von bootstrap zur Verfügung gestellten Funktionen .modal('show') und .modal('hide'). Das Modal wird nicht ausgeblendet, aber mein Konsolenprotokoll wird ausgelöst. 

Ich weiß, es gibt viele Fragen mit einem ähnlichen Problem, aber diese Fragen enthielten nicht die Antwort, die ich gesucht hatte. Ich weiß, dass css in html einfach nicht richtig ist, aber ich habe ein paar schnelle Prototypen gemacht, also bitte verzeihen Sie mir das.

Code

Offener Link für Modal

<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

Das modale HTML

<!-- Modal -->
<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">

  <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" onClick="closeModal()"></i>

  <div class="body-modal" style="max-width: 90%; margin: 0 auto; overflow: scroll;">

    <div id="clip" style="overflow:scroll;">
        <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
    </div>

  </div>  

</div>

Die JS 

function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};

Mein Hauptproblem ist, dass mein Modal angezeigt wird. Außerdem wird der console.log sowohl für das Anzeigen als auch das Ausblenden ausgelöst. Nach dem Klicken auf die Schaltfläche zum Schließen wird das Modal jedoch nicht ausgeblendet.

javascriptjquerytwitter-bootstrapbootstrap-4
9
Gijsberts

TLDR;

Es scheint so, als würden Sie brauchen den modal-dialog div in Ihrem Modal, damit .modal('hide') oder data-dismiss="modal" funktionieren.

-

Ich habe Ihr Problem behoben, indem Sie die body-modal-Klasse in modal-dialog geändert haben. (und hat Ihr Nahes Symbol in Rot geändert, damit es im Snippet besser zu sehen ist)

function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">
  <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: red; top: 40px; cursor: pointer; z-index: 1700;" onClick="closeModal()">close</i>
  <div class="modal-dialog" style="max-width: 90%; margin: 0 auto; overflow: scroll;">
    <div id="clip" style="overflow:scroll;">
      <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
    </div>
  </div>
</div>

Aber jetzt ist der Modal (visuell) etwas chaotisch.

Ich würde empfehlen, dass Sie die modal docs überprüfen. Mit den in Bootstrap 4 enthaltenen Funktionen würden Sie wahrscheinlich den Großteil Ihrer zusätzlichen (Inline-) CSS und JS entfernen und auf diese Weise sicherstellen, dass alles in den meisten Browsern gut funktioniert.

3
Klooven

Wenn Sie die fade-Klasse entfernen, funktioniert dies einwandfrei.

Ich denke, dass Sie einen modal-dialog div benötigen, wenn Sie die fade-Klasse verwenden möchten. Verwenden Sie auch nur eine Art von Schließ-/Öffnungsmodalen, entweder js oder data-toggle/data-dismiss.

2
Joel García

Sie können data-dismiss = "modal" verwenden, um das Modal zu schließen

<i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" data-dismiss="modal" ></i>

0
Manpreet