11.02.2021, 18:02
|
|||
|
|||
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 ? 
|
| Sponsored Links |
|
12.02.2021, 10:30
|
|||
|
|||
|
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?
|
| Sponsored Links |
|
12.02.2021, 12:57
|
|||
|
|||
|
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>
|
|
12.02.2021, 13:59
|
|||
|
|||
|
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?
|
|
12.02.2021, 14:49
|
|||
|
|||
|
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%);
}
|
|
12.02.2021, 18:55
|
||||
|
||||
|
meinst du das so ?
https://codepen.io/basti1012/pen/zYoNGGj
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
