Neues Textfenster (Pop-Up) im Impressum

Question

In unserem Fragebogen möchten wir anstelle des Standard-Impressums gerne zwei klickbare Texte einbetten, die jeweils in einem kleinen Pop-Up-Fenster ein vollständiges Impressum bzw. eine Datenschutzerklärung öffnen. Lassen sich die entsprechenden Textbausteine irgendwie in den HTML-Code des Impressums einfügen? Mit der PHP-Funktion textlink() hat es bisher leider nicht geklappt.

Answer 1

Sie können es entweder mit einem Pop up probieren:
https://www.w3schools.com/howto/howto_js_popup.asp

oder so:
Das hier ist eine Eigenkreation, die ich für ein Datenschutzfenster benutzt haben:

********HTML***********

// Um die Datenschutzerklärung zu sehen drücken Sie hier: 

<button class="tempo1" type="button" onclick="buttonShow()">Datenschutzerklärung</button> 


**********SCRIPT**************
--> macht es möglich den Button zu anzuklicken und wieder zu schließen

<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Hier steht sp?ter ganz viel Text
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>
 
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes St?ckchen unter dem Knopf
info.style.marginTop = "10px";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
//-->
</script>


********CSS**********
--> zum Stylen des Datenschutz Buttons
<style>

.tempo1 {
  background:    #e06666;
background:    linear-gradient(#e06666, #b32525);
border-radius: 5px;
padding:       8px 20px;
color:         #ffffff;
display:       inline-block;
font:          normal bold 25px/1 "Calibri", sans-serif;
text-align:    center;
text-shadow:   1px 1px #000000;
}

</style>