Popups & Dialoge

Popup mit title=

Bleib mit der Maus über diesen Text stehen

Fahre mit der Maus über diesen Text und bleib darüber stehen

Popup mit STYLEAber so ist das Popup massiv sichtbarer!

<style>
 	seoPP {display:none;}  /* Der Pseudotag seoPP wird unberührt NICHT angezeigt */
    
    .info{position:relative;}
    .info:hover{z-index:25; }
    .info:hover seoPP{ 	
		    display:block;
			position:absolute;
			top:1em;
			left:1em;
			font-size:24px;
			border:2px solid #000000;			
			background-color:rgba(255, 255, 0, 0.7);
			color:red;
			width:11em;}
  </style>

Berühre mit der Maus diesen Text  Popup nur mit Styles!

<style>
 	seoPP {display:none;}  /* Der Pseudotag seoPP wird unberührt NICHT angezeigt */			
    .infoG{position:relative;}
    .infoG:hover{z-index:25; }  
	
    .infoG:hover seoPP
			{ 	
				display:block;
				position:relative;
				bottom: 100%;  /* bottom: nach oben, mit top: nach unten */
				left: 2em;
			}
  </style>

Berühre mit der Maus diesen Text

Dialoge

Normales window.alert

<button onclick="alert('Hallo du!')">Drücken</button>

CONFIRM window.confirm

<button onclick="winCon('Bist du sicher?')">Drücken</button>
<seo id="confirm"></seo>

<script>
function winCon(text)
{    
	let answer = window.confirm(text);
	if (answer) 
	{
  		document.getElementById("confirm").innerHTML = "Du bist dir sicher!";
	} 
	else 
	{
  		document.getElementById("confirm").innerHTML = "Oh, du bist dir nicht so sicher?";
	}
}
</script>

PROMPT window.prompt

<button onclick="winPro()">Drücken</button>
<seo id="prompt"></seo>

<script>
function winPro()
{    
    name = window.prompt("Wie heisst du?");
    document.getElementById("prompt").innerHTML = "Ich grüsse dich, " + name;
}
</script>

<DIALOG>

Normal: Modal:

<button onclick="winDial()">Dialog an/aus</button>
<dialog id="dial" >Das ist eine Dialogbox<br><br><button onclick="winDial()">Dialog aus</button></dialog>

<script>
function winDial()
{    
    dialogFlagg *= -1;
    console.log(rbWertFlagg);
    if(dialogFlagg > 0)
    { // Zeigen
       if(rbWertFlagg < 0) 
       {
       	document.getElementById("dial").show();
       }
       else   
       {
       	document.getElementById("dial").showModal(); // Restfenster ist grau und blockiert alles
       }
    }
    else
    { // Verbergen
      // document.getElementById("dial").innerHTML = "Ich will schliessen"
      document.getElementById("dial").close();
    }
    
}
</script>

Datum