jQuery simple Alternative zu js alert() mit Selbstzerstörung

23. Januar 2014 - JavaScript

In der vorhergehenden Version war ein Fehler: der ist hier korrigiert (Zeilen 27 und 28)
Error correction in code lines 27, 28

Hier ist ein einfaches Beispiel für eine Meldungsausgabe in einem js Programm, die den Benutzer informiert, aber seinen Workflow nicht unterbricht.

English summary: This is a minimalistic jQuery/ js example to alert a user but without corrupting his workflow. No clicking on ‚OK‘ is required. The information simply dissolves after some seconds. The example utilizes the jQuery promise interface to synchronize animations.

Ich benutze alert_dissolve() parallel zu alert()  immer dann, wenn ich dem Benutzer eine positive Rückmeldung geben möchte: alles gut, arbeite schön und unbesorgt weiter.

Einsatzfall ist z.B. ein post per ajax: der Benutzer legt irgend etwas an oder löscht etwas oder oder oder


$.post('mach_irgend_was.html',data,'json')
.done (function(data, status, xhr) {
var data = jQuery.parseJSON(data);
if(data.error)     {
alert(data.error); // schlimmer Fehler
.....
} else {
alert_dissolve(data.ok); // hab alles gemacht was du wolltest
}
})
.fail (function(data, status, xhr) {
alert('Systemfehler...');
.....
})

Die ‚mach_irgend_was.html‘ Seite  schickt zu diesem Zweck eine json decodierte Meldung mit einem Error Anteil und ggf. einem informativen Anteil.

In alert_dissolve() wird der informative Teil ein paar Sekunden unübersehbar angezeigt und verflüchtigt sich dann

Hier ist der Code


function alert_dissolve (text) {

//message centered in viewport
var viewportWidth=jQuery(window).width(),
viewportHeight=jQuery(window).height(),
documentScrollTop=jQuery(document).scrollTop(),
documentScrollLeft=jQuery(document).scrollLeft(),
minTop=documentScrollTop,
maxTop=documentScrollTop + viewportHeight,
minLeft=documentScrollLeft,
maxLeft=documentScrollLeft + viewportWidth;

var msg_box=jQuery("<div id='alert_dissolve'>"+text+"</div>")
.appendTo('body')
.css({
zIndex: 1500,
backgroundColor: 'rgba(255,255,255,0.1)',
color: 'green',
'font-family': 'Arial',
fontSize: 50,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 20,
paddingBottom: 20})
.hide();
// error correction:
var centerTop=documentScrollTop +(maxTop-minTop)/2 - msg_box.height()/2;
var centerLeft=documentScrollLeft + (maxLeft-minLeft)/2 - msg_box.width()/2;

msg_box.css({
position: 'absolute',
top: centerTop,
left: centerLeft})

.show()
.delay( 1200 )
.fadeOut(800);
msg_box
.promise()
.done(function() {
jQuery('#alert_dissolve').remove();
});
};

Er besteht nur aus drei Aktionen:

1. Füge ein formatiertes, unsichtbares <div> Element mit dem Text in den DOM ein

2. Positioniere es mittig im Viewport und über allem anderen Content
(mit z-index: 1500 liegt es dann auch über evtl. vorhandenen jQuery UI Dialogen)

3. Mache es animiert sichtbar und wieder unsichtbar und zerstöre es dann.

Das größte Problem ist es, das <div> mit remove() zu zerstören ohne die asynchronen Animationen zu beeinflussen. Deshalb verwende ich hier das promise Interface von jQuery.