zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie css message box anzeigen nach button klick?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.02.2021, 18:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 38
Tertius befindet sich auf einem aufstrebenden Ast
Standard Wie css message box anzeigen nach button klick?

Ich möchte das in bestimmten Fällen eine Messagebox für ein paar Sekunden angezeigt wird und dann selbst wieder verschwindet.


Hier mein Code:
Code:
<!DOCTYPE html>
<html>
  <head>
    <style>
.isa_success, .isa_error {
  margin: 8px 0px;
  padding:8px;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
}

.isa_success {
  color: #4F8A10;
  background-color: #DFF2BF;
  border-radius:.5em;
  opacity:0;
  -webkit-animation: fadeInOut 2s;
  animation: fadeInOut 2s;
}

.isa_error {
  color: #D8000C;
  background-color: #FFD2D2;
  border-radius:.5em;
  opacity:0;
  -webkit-animation: fadeInOut 2s;
  animation: fadeInOut 2s;
}
    </style>
  </head>
<body>
    <div class="isa_success">Replace this text with your own SUCCESS text.</div>
    Test
</body>
</html>

Die Messagebox wird so gar nicht angezeigt. Sie soll aber angezeigt werden nachdem ein Button geklickt wurde.

Wie kann ich das umsetzen ?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.02.2021, 10:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du hast keinen Button in deinem geposteten HTML. Auch brauchst du für die Funktionalität des buttons ein JS, das fehlt auch in deinem Post. Was hast du denn schon probiert um dein Problem umzusetzen? Oder sollen wir das für dich schreiben?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.02.2021, 12:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 38
Tertius befindet sich auf einem aufstrebenden Ast
Standard

Mir fehlte der Ansatz wie ich das mit dem Button mache.

Habe es nun so gelöst:

Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fade{
background: red;
opacity:0;
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
margin: 8px 0px;
padding:8px;
position: absolute;
left: 50%;
top: 20%;
}

.elementToFadeInAndOut {
animation: fadeInOut 3s linear forwards;
}

@keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; } 
100% { opacity:0; } 
}
</style>
</head>

<body onload="javascript:start();">
<body>

<script type="text/javascript">
function start() {
var div = document.querySelector(".fade");
var btn = document.querySelector(".fadeButton");
btn.addEventListener("click", function(){
div.classList.add("elementToFadeInAndOut");
setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 3000);
});
}
</script>

<button class="fadeButton">Button</button>
<div class="fade">This is a message!</div>


</body>
</html>
Mit Zitat antworten
  #4 (permalink)  
Alt 12.02.2021, 13:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 38
Tertius befindet sich auf einem aufstrebenden Ast
Standard

Jetzt müsste die Messagebox immer vertikal mittig auf dem sichtbaren Bildschirm angezeigt werden. Also nicht vom Seitenanfang sondern auf dem derzeit sichtbaren Ausschnitt der Seite.

Weiß jemand wie ich das erreichen kann?
Mit Zitat antworten
  #5 (permalink)  
Alt 12.02.2021, 14:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

das funktioniert mit absoluter positionierung.
Mit Zitat antworten
  #6 (permalink)  
Alt 12.02.2021, 14:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 38
Tertius befindet sich auf einem aufstrebenden Ast
Standard

Ich habe das nun so gemacht aber es funktioniert nicht wie gewünscht. Zwar wird die Message in der Mitte angezeigt aber wenn ich auf der Seite nach unten rolle und dort einen Button klicke, dann wird die Message weiterhin oben (nach 50%) angezeigt.

Code:
.fade{
  background: red;
  opacity:0;
  color: #4F8A10;
  background-color: #DFF2BF;
  border-radius: .5em;
  margin: 8px 0px;
  padding:8px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
}
Ziel ist es, auch wenn ich auf der Seite nach unten rolle, soll die Message in der Mitte des aktuell dargestellten Ausschnittes angezeigt werden.
Mit Zitat antworten
  #7 (permalink)  
Alt 12.02.2021, 18:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 156
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

meinst du das so ?
https://codepen.io/basti1012/pen/zYoNGGj
Mit Zitat antworten
  #8 (permalink)  
Alt 13.02.2021, 18:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 38
Tertius befindet sich auf einem aufstrebenden Ast
Standard

Ja genau so
Danke!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
anfänger braucht hilfe für css box SiCK6SiX CSS 1 12.08.2004 16:20
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 17:17
Seite "halbiert" nach Klick auf Link - CSS Bug? Nina CSS 1 14.01.2004 14:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:29 Uhr.