SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:JS-inline-popup.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> 
  <style>
 
body { 
  font-family: Avenir, sans-serif; 
}

main {
  position: relative;
}
.overlay  {
  border-radius: 0 .5em .5em;	
  border: thin solid;
  padding: .5em;
  margin: .5em;
} 
button { 
  padding: .5em 1em;
  margin: .5em;
  font-size: 1em;
  background: #666; 
  border: thin solid #333;
  color: white;
  cursor: pointer; 
}
 
.overlayHidden {
  display: none;
}
 
.overlay { 
  width: 20em; 
  background: #fffbf0; 
  border: thin solid #e7c157;
  position: absolute;
  top: 10%;
  right: 30%;
  margin: auto;
  padding: 1em;
}

#schließen {
  position: absolute;
  margin: 0;
  right: 0;
  top: 0;
  background: #c32e04;
  color: white; 
  font: bold 0/0 sans-serif;
}

#schließen::before {
  content: "X";
  font: bold 1rem sans-serif;
}

  </style>
  <title>Beispiel: inlinePopup mit ClassName</title>
</head>
<body>
  <h1>Beispiel: inlinePopup mit ClassName</h1>
 
  <main>
    <button id="start">Anmeldung</button>
 
    <div id="popup" class="overlayHidden">
      <h2>Anmeldung</h2>
      <form method="post">
        <label for="email">Bitte geben Sie Ihre Email-Adresse an: </label><input id="email" type="email" />
      </form>  
      <button id="anmeldung">anmelden</button>
      <button id="schließen">schließen</button>
    </div>

<p>Dieses Beispiel dient nur der Demonstation, wie Sie mit einem Klick auf einen Button ein Script ausführen, das dann mit <code>className()</code> ein Element selektiert.<br>Ein solches Popup wird heute viel einfacher mit der <a href="https://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover"><strong>Popover API</strong></a> realisiert.
  </main>
 
<script>
 
  var startBtn = document.getElementById('start'),
      AnmeldungBtn = document.getElementById('anmeldung'),
      SchließenBtn = document.getElementById('schließen');
      popup = document.getElementById('popup');
	   
  startBtn.addEventListener('click',zeigeFenster);
  AnmeldungBtn.addEventListener('click',schließeFenster);
  SchließenBtn.addEventListener('click',schließeFenster);
 
 
  function zeigeFenster() { 
      popup.className = 'overlay';
  }
 
  function schließeFenster(){
      popup.className = 'overlayHidden';
  }
</script>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-inline-popup.html&oldid=93313“