diedVIPs

html knowhow

Popup mit Fenster










Popup mit Fenster

Mit diesem Modul fügen Sie einen Button ein, der ein Popup-Fenster öffnet.
So sieht´s aus
popup
 
 
Quellcode
<html>
<head>

<style>
.main {width: 100%;height: 10vh;background-image: url(bg.jpg);background-size: cover;transition: all .2s ease;}
.button {width: 165px;height: 40px;position: relative;display: block;margin: 60px auto 60px auto;text-align: center;line-height: 33px;border: 2px solid #0000FF;padding: 9px 11px 1px 11px;
font-size: 25px;text-transform: uppercase;color: red;font-weight: bold;cursor: pointer;border-radius: 7px;}
.button:hover {background: #0000FF;box-shadow: 0 0 10px #fff;color: #fff;}
.button:active {color: #0000FF;background-color: #F7D832;}
.overlay {position: fixed;width: 100%;height: 100vh;top: 0;left: 0;display: none;background-color: rgba(0, 0, 0, .8);}
.popup {position: absolute;width: 400px;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 40px;border-radius: 5px;box-sizing: border-box;background: blue;color: pink;}
.popup__h2 {text-align: center;}
.close-popup {position: absolute;top: 10px;right: 10px;width: 23px;height: 23px;cursor: pointer;}
.close-popup:before {content: '';background-color: #fff;position: absolute;height: 1px;width: 20px;top: 11px;left: -4px;transform: rotate(-45deg);}
.close-popup:after {content: '';background-color: #fff;position: absolute;height: 1px;width: 20px;top: 11px;transform: rotate(45deg);left: -4px;}
</style>
</head>

<body>
<center><main>
<div class="button">popup</div>
<main>

<div class="overlay">
<div class="popup">
<h2 class="popup__h2">Popup mit Fenster</h2>
Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können.
Html, CSS und Java bieten da super Möglichkeiten der Webseiten-Gestaltung. Ich gebe Homepage-Designern Tipps, wie sie ihren Webauftritt verbessern können.
<div class="close-popup"></div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>$('.button').click( function() {
$('.overlay').fadeIn();
});
$('.close-popup').click( function() {
$('.overlay').fadeOut();
});
$(document).mouseup( function (e) {
var popup = $('.popup');
if (e.target != popup[0] && popup.has(e.target).length === 0){
$('.overlay').fadeOut();
}
});
</script>
</main></center>
</body>
</html>
 









Kontakt    Datenschutz   Impressum