Javascript - Alternative zu "alert"?

mumpel · 19. Juli 2021, 21:37

Hallo!

Gibt es in Javascript eine Alternative zu "Altert". Z.B. eine Art "Bildanzeige" die sich nach einer eingestellten Zeit von selbst schließt? (In Google nichts gefunden). Danke!

Gruß, René

ISliceUrPanties · 19. Juli 2021, 21:41

Hallo,
sowas wird immer in Kombination gemacht. Diverse Frameworks bieten sowas OOB, z.B. Bootstrap

mumpel · 19. Juli 2021, 22:32

Danke! Dieses Bootstrap ist sehr umfangreich. Ich habe jetzt doch noch was einfaches gefunden, mit anderen Suchbegriffen (Splashscreen). Quelle: stackoverflow

HTML-Quellcode

<script>
// Meldungsfenster erzeugen
function CodeCopied(strText,lngTime) {
var msgMeldung = document.createElement("div");
msgMeldung.setAttribute("style","background-color: grey;color:black; width: 350px; height: 80px; " +
"position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; " +
"border: 4px solid black; font-family:arial; font-size:14px; " +
"display: flex; align-items: right; justify-content: center; text-align: center;");
msgMeldung.innerHTML = strText;
setTimeout(function(){ msgMeldung.parentNode.removeChild(msgMeldung); }, lngTime);
document.body.appendChild(msgMeldung);
}
</script>

So ganz richtig ist das nicht, da die Meldung aus dem Sichtbereich gerät wenn man weit nach unten scrollt.

Zum Aufruf z.B.:

HTML-Quellcode

CodeCopied("Der Code wurde in die Zwischenablage kopiert. <br><br> (Dieses Fenster schließt sich selbst)", 2000)

Da klappt nur der Zeilenumbruch nicht. Mal schauen ob ich das lösen kann.

Fakiz · 19. Juli 2021, 23:11

Naja dein CSS ist etwas wirr, durch die Flexbox gehen die Zeilenumbrüche verloren. Nimm mal die Attribute bottom, right, margin, display, align-items & justify-content raus. Die sind soweit ich das sehe unötig.
Die positionierung kannst du dann über left und top bewerkstelligen.

HTML-Quellcode

<script>
CodeCopied("Der Code wurde in die Zwischenablage kopiert. <br><br> (Dieses Fenster schließt sich selbst)", 2000);
// Meldungsfenster erzeugen
function CodeCopied(strText,lngTime) {
let msgMeldung = document.createElement("div");
msgMeldung.setAttribute("style", `background-color: grey;
color: black;
width: 350px;
height: 80px;
position: absolute;
left: calc(50vw - 125px);
top: calc(50vh - 40px);
border: 4px solid black;
font-family: arial;
font-size: 14px;
text-align: center;`);
msgMeldung.innerHTML = strText;
setTimeout(function(){ msgMeldung.parentNode.removeChild(msgMeldung); }, lngTime);
document.body.appendChild(msgMeldung);
}
</script>

mumpel · 19. Juli 2021, 23:27

Danke! Gibt es noch eine Möglichkeit, die Meldung immer in der Mitte des Bildschirms zu platzieren? Sonst verschwindet die Meldung bei großen Seiten. Ich nutze dieses Script für ein Doppelklickereignis, welches den Codefenstern auf meiner Homepage zugeordnet ist.

Fakiz · 19. Juli 2021, 23:58

Ja da hab Ich mich verrechnet, 350px / 2 ist ja nicht 125px. Das müsste man korrigieren. Also calc(50vw - 162.5px); wobei hier wohl doch margin die bessere Wahl wäre. Da nicht alle Browser gleich mit halben Pixeln umgehen.

mumpel · 20. Juli 2021, 00:32

Das funktioniert nicht. Ich meine nicht den Text, sondern das gesamte Meldungsfenster (div), dieses sieht man nicht wenn ich nach unten scrolle und dort einen Doppelklick in ein Codefenster mache.

Marcel1997 · 20. Juli 2021, 07:27

versuch mal

Quellcode

position: fixed;

statt

Quellcode

position: absolute;

Fakiz · 20. Juli 2021, 07:32

Ah, in dem Fall vergiss meine Verbesserung und setz einfach die auszugebende Nachricht in einen div.

mumpel · 20. Juli 2021, 09:33

Ein einfaches div geht nicht, da sich dieses ja auch verschiebt.

MrTrebron · 20. Juli 2021, 10:02

Wieso verschiebt sich das Ganze?
Habe ich jetzt etwas falsch verstanden?

Jemand Klickt auf einen Button oder ähnliches und soll kurz angezeigt bekommen, dass er etwas in die Zwischenablage kopiert worden ist.
Scrollt man da als User dann so schnell weiter? Oder soll der User nicht weiter scrollen dürfen?

Wie wäre es mit einem Tooltip auf deinem Button? educba.com/javascript-tooltip/
Oder einem modalen Fenster? sabe.io/tutorials/how-to-create-modal-popup-box

mumpel · 20. Juli 2021, 11:43

MrTrebron schrieb:

Jemand Klickt auf einen Button oder ähnliches und soll kurz angezeigt bekommen, dass er etwas in die Zwischenablage kopiert worden ist.
Scrollt man da als User dann so schnell weiter? Oder soll der User nicht weiter scrollen dürfen?

Da hast Du was falsch verstanden. Bei Doppelklick auf ein Codefenster wird der Code in die Zwischenablage kopiert. Aber ich habe "fixed" übersehen, damit kommt die Meldung immer in die Bildschirmmitte.

Javascript - Alternative zu "alert"?

Javascript - Alternative zu "alert"?

HTML-Quellcode

HTML-Quellcode

HTML-Quellcode

Quellcode

Quellcode

MrTrebron schrieb:

Ähnliche Themen

5 Benutzer haben hier geschrieben