kann bootstrap modal vom Schließen auf Knopfklick nach erfolgloser Validierung nicht stoppen

Question

Ich weiß, dass diese Frage ein paar Mal gestellt wurde, aber die Verwendung von e.preventDefault() oder event.preventDefault() schien nicht für mich zu funktionieren.

Dies ist der Code-Schnipsel:

$(".save").on("click", function (e) { 
    e.preventDefault(); 
    var noImages = $('input[name="pics[]"]:checked').length; 
     if(noImages > 1) { 
      alert("Only one image allowed"); 
     } else { 
     // allow selection and close modal 

Wenn mehr als ein Bild in den modalen ausgewählt wird, wird die Nachricht alarmiert, sondern schließt die modal, die es nicht sollte. Das Modal sollte nur geschlossen werden, wenn der Benutzer ein Bild auswählt und dann auf "Speichern" klickt.

<button type="button" class="btn btn-primary save" data-dismiss="modal">Save</button> 

Answer 1

Wenn Sie das Schließen Ihrer modalen steuern möchten, sollten Sie data-dismiss="modal" von Ihrem html entfernen. Das Problem löst dann das Schließen aus, wenn Sie möchten.

Bootstrap gibt einen Griff mit .modal('hide'). Zum Beispiel in Ihren speichern klicken Handler:

$(".save").on("click", function (e) { 
    e.preventDefault(); 
    var noImages = $('input[name="pics[]"]:checked').length; 
    if(noImages > 1) { 
     alert("Only one image allowed"); 
    } else { 
     $(e.target).closest('.modal-dialog').modal('hide'); 
    } 
}); 

Wenn Sie eine ID modal hat, können Sie es auch, dass die Art und Weise statt closest finden.