Ersetzen Sie JavaScript-Alerts durch ein Modalfenster

Question

Wie man JavaScript-Alerts durch ein Modalfenster ersetzt?

Die JavaScript-Alerts werden durch ein Echo ausgelöst, das von einigen Datenbankergebnissen abhängt.

if response is a
{
     alert("response ist a.");
}
else
{
    alert("response ist nicht a.");
}

Ich verwende Bootstrap, wenn wir die Alerts durch ein Bootstrap-Modal ersetzen können, ist das perfekt

Answer 1

Ich habe mir erlaubt, ein jsbin-Beispiel für Sie zu erstellen, basierend auf dem Code, den Sie in der folgenden Frage finden können: JavaScript: Überschreiben von alert()

http://jsbin.com/UzUDOno/1/edit

Beachten Sie, dass das Überschreiben von alert möglicherweise keine gute Idee ist, insbesondere weil Sie die blockierenden Eigenschaften von regulären JavaScript-Alerts verpassen werden. Wie Sie in meinem Beispiel sehen können, wenn Sie schnell aufeinanderfolgende Warnungen verwenden, wird die letzte die vorherigen überschreiben.

Answer 2

Aktualisiert Antwort von @omar-fernando-pessoa, um mit Bootstrap 3.4.1 zu arbeiten

https://jsbin.com/monupudode/1/edit?html,output

         JS Bin    (function() { var proxied = window.alert; window.alert = function() { modal = $('<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 id="myModalTitle" class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body&hellip;</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>'); modal.find(".modal-body").text(arguments[0]); modal.modal('show'); }; })(); alert('moo'); alert('cow');    

Aktualisiert für Bootstrap 5.1.3

https://jsbin.com/mimexomela/1/edit?html,output

       JS Bin    (function() { var proxied = window.alert; window.alert = function() { modaldiv = $('<div id="myModal" class="modal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 id="myModalTitle" class="modal-title">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></div></div></div></div>'); modaldiv.find(".modal-body").text(arguments[0]); modal = new bootstrap.Modal(modaldiv); modal.show(); }; })(); alert('moo'); alert('cow');

Answer 3

Nur eine Ergänzung zu @Kippie.

http://jsbin.com/sadesukuli/2/edit?html,output

JS Bin

    (function() {
  var proxied = window.alert;
  window.alert = function() {
    modal = $('<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>One fine body…</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button></div></div>');
    modal.find(".modal-body").text(arguments[0]);
    modal.modal('show');
  };
})();

    alert('moo');
    alert('cow');

"Ihr jsbin-Beispiel zeigt einen Aufruf von alert('moo') gefolgt von alert('cow')"

Mein Beispiel zeigt sowohl 'moo' als auch 'cow'.