html knowhow

Internes Popup-Fenster

So sieht´s aus

Klicke mich! um das Popup-Fenster zu öffnen.

Quellcode

<html>
<head>

<style>
* {box-sizing: border-box;}.pop {position: relative; width: 50%; margin: auto; padding: 20px; height: 50%; top: 0; left: 0; right: 0; bottom: 0;}
@media (max-width: 640px) {.pop {position: relative; width: 100%;}}
@media (max-width: 640px) {.pop .modal__inner {width: 100%;}}
.pop .modal {z-index: 2; opacity: 0; visibility: hidden; position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); top: 0;
left: 0; right: 0; bottom: 0; -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out;}
.pop .modal__inner {-webkit-transform: translate(-50%, -50%) scale(0.75); transform: translate(-50%, -50%) scale(0.75); top: 50%; left: 50%; width: 50%;
background: white; padding: 30px; position: absolute; color: black;}
.btn-close{color: #fff; text-align: center;}
.pop label {display: inline-block; cursor: pointer;}
.pop label.open {color: turquoise; -webkit-transition: color 200ms ease-in-out; transition: color 200ms ease-in-out; text-decoration: underline;}
.pop label.open:hover {color: paleturquoise;}
.pop input {display: none;}
.pop input:checked + .modal {opacity: 1; visibility: visible;}
.pop input:checked + .modal .modal__inner {-webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.pop input:checked + .modal .modal__inner p {font-size: 1.25rem; line-height: 125%;}
.pop input:checked + .modal label {position: absolute; top: 0; right: 0; height: 30px; width: 30px; background: #666666; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.pop input:checked + .modal label:hover {background: #333333;}
</style>
</head>

<body >
<div class="pop" style="left: 0; right: 893px; top: 0; bottom: 293px">
<p><center><label for="3" class="open">Klicke mich!</label> um das Popup-Fenster zu öffnen.</center></p>
<input type="checkbox" id="3" />
<div class="modal">
<div class="modal__inner">
<p><b>Hi! Welcome to HTMLKnowhow.</b><br><br><i> Bei uns können Sie die besten CSS-Codes mit Demo finden.</i></p>
<label class="btn-close" for="3">X</label>
</div>
</div>
</div>
</body>

</html>

Kontakt Datenschutz Impressum