wake-up-neo.net

Das modifizierte Bootstrap-Hide funktioniert nicht

Das modifizierte Bootstrap-Hide funktioniert nicht. Alert kommt an anderer Stelle. aber mein modal ist nicht versteckt hinzugefügt bootply. Mein Problem ist das gleiche.

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</div>



<script type="text/javascript">
$("#buy").click(function () {
   var a = 4;
   if (a == 5) {
     alert("if");
     $('#myModal').modal('show');
   }
   else {
    alert("else");
    $('#myModal').modal('hide');
   }

});
</script>

bootply

20
Sam

Sie verwenden beide Modal-Toggle-Methoden: über Javascript und über Datenattribute. Ihr Klick löst also die modale Show aus, wenn Ihre Datenattribute festgelegt sind, und Ihr Javascript beeinflusst diesen Trigger nicht.

Entfernen Sie einfach die Datenattribute und gehen Sie zur Javascript-Methode:

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>
25
albertedevigo

Ich hatte das gleiche Problem, habe viele Dinge ausprobiert, aber die einzige Lösung, die für mich funktionierte, war @Tang Chanrith schlug vor, einzelne Teile des Modals zu entfernen, aber ein wenig verbessert, um sie wieder zu positionieren und die Bildlaufleiste zu positionieren. Ich werde meine Antwort nur stellen, wenn die akzeptierte Antwort für sie nicht funktioniert hat. Entschuldigung für mein Englisch. Hoffe ich habe geholfen.

@ Tang Chanrith

Versuchen Sie diese Funktion

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $("#myModal").hide();
}

Verbesserte Sollution

Sie müssen lediglich eine Klasse aus body und css löschen, die generiert wurden

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $("#myModal").hide();
}
11
Vaios P.

Versuchen Sie diese Funktion

function hideModal(){
    $("#myModal").removeClass("in");
    $(".modal-backdrop").remove();
    $("#myModal").hide();
}
6
Tang Chanrith

Ich habe Ihren Code überprüft. Jetzt vergleichen Sie a == 5. Aber a ist immer 4. Möglicherweise müssen Sie überprüfen, warum Sie diesen Vergleich durchführen. Außerdem müssen Sie das Datenziel entfernen, wenn Sie möchten modal über Javascript zu öffnen:

<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>

datenziel öffnet das Modal direkt. Prüfen Sie, ob dies funktioniert.

1
Kshitiz

versuche, return false wie folgt hinzuzufügen:

$("#buy").click(function () { 
  var a = 4;
  if (a == 5) {
    alert("if");
    $('#myModal').modal('show');
  }
  else {
    alert("else");
    $('#myModal').modal('hide');
  }
  return false;
});
1
iMichaeln

Sie sollten dies $('.modal.in').modal('hide') versuchen

Über https://github.com/twbs/bootstrap/issues/489

1
Feuda

Ich habe dieses Problem gelöst.

$('#landingpage, body').on('click',function(){
    $( ".action-close" ).trigger( "click" );});
1
Takechi Ponchai

Ich hatte das gleiche Problem. Ich habe den im Posting vorgeschlagenen JavaScript-Weg ausprobiert, leider funktionierte er nur zur Hälfte. Wenn ich meinen Modal ein paar Mal ausgelöst habe, wird er fehlerhaft. Als Ergebnis erstellte ich eine Umgehung mit CSS:

/* Hide the back drop*/
.modal-backdrop.show {
    display: none;
}
/* Simulate the backdrop using background color */
.modal-open .modal {
    background-color: rgba(47, 117, 19, 0.3);
}
0
Brenden Stefano

Ich habe auch das gleiche Problem, wo ich nicht die richtige Lösung dafür finden kann.

Später habe ich festgestellt, was passiert, wenn das Modal geschlossen wird, wenn es gut funktioniert.

Drei Haupteigenschaften sind:

  • Die Klasse modal-open Wird aus dem Tag <body> Entfernt.
  • Im Tag <body>CSS ändern.
  • Die Klasse <div> Von modal-backdrop Wird entfernt.

Also, wenn Sie diese Dinge manuell tun, werden Sie es erreichen, wenn es nicht funktioniert.

Der Code sollte in Jquery wie folgt lauten:

      $('body').removeClass('modal-open');        
      $('body').css('padding-right', '');
      $(".modal-backdrop").remove();
      $('#myModal').hide();

Probieren Sie dies aus und finden Sie eine Lösung.

0
Gowtham Ag

Wie ich festgestellt habe, müssen Sie manchmal den Darstellungsstil entfernen:

style="display: block;"
0
Mahdi Alkhatib

Ich hatte das gleiche Problem, mein Fehler war, dass ich das modale Fenster mehrmals öffnen wollte. Wir müssen testen, dass das modale Fenster nicht bereits geöffnet ist, bevor Sie versuchen, es zu öffnen.

    if (!($("#MyModal").data('bs.modal') || {})._isShown){ 
        $("#MyModal").modal('show');
    }
0
Mathieu

Im Javascript-Code müssen Sie eine Codezeile hinzufügen

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
0
Prathap Kudupu

Ich habe das modale Popup geöffnet, als ich auf das Attribut link using data-toggle = "modal" geklickt habe, das mit diesem Link verknüpft war, und versucht habe, es mit Javascript zu schließen Ich entferne das "data-toggle" -Attribut und "href" von diesem Link und öffne es mit Javascript, dann wird es auch mit Javascript ordnungsgemäß geschlossen.

aus den folgenden wenigen Codezeilen können Sie leicht verstehen

<a href="#CustomerAdvancedModal" data-toggle="modal" class="classShowAdvancedSearch">Advanced Search</a>

Ich habe den obigen Link zu etwas geändert, das diesen Link enthält

 <a href="#" class="ebiz-Advanced-Search classShowAdvancedSearch">Advanced Search</a>

Wenn ich danach versuche, es mit Javascript zu schließen, werde ich erfolgreich

$("#CustomerAdvancedModal").modal('hide');

0
Naveed Alam