pop up annons sportouchen camp

avatar
unknown
html
3 years ago
2.5 kB
10
Indexable
<!DOCTYPE html>
<html>
<head>
	<title>Pop-up fönster</title>
	<style>
		/* Bakgrundsskugga för pop-up fönster */
		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.7);
			z-index: 9999;
			display: none;
		}
		/* Pop-up fönster */
		.popup {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			padding: 20px;
			width: 400px;
			border-radius: 5px;
			box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
			z-index: 10000;
			display: none;
		}
		/* Kryssknapp */
		.popup-close {
			position: absolute;
			top: 10px;
			right: 10px;
			cursor: pointer;
		}
		/* Knapp för att gå vidare till laget.se */
		.popup-button {
			display: block;
			margin: 20px auto;
			padding: 10px 20px;
			background-color: #4CAF50;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		/* Annons */
		.ad {
			position: fixed;
			bottom: 10px;
			right: 10px;
			background-color: #f2f2f2;
			border: 1px solid #ddd;
			border-radius: 5px;
			padding: 10px;
			display: none;
		}
	</style>
</head>
<body>

	<!-- Bakgrundsskugga för pop-up fönster -->
	<div class="overlay" id="overlay"></div>

	<!-- Pop-up fönster -->
	<div class="popup" id="popup">
		<!-- Kryssknapp -->
		<div class="popup-close" onclick="closePopup()">X</div>
		<h2>Anmäl dig till SporttouchenCamp 2023</h2>
		<p>Få chansen att träffa oss och utveckla dina fotbollsfärdigheter!</p>
		<!-- Knapp för att gå vidare till laget.se -->
		<a href="https://sporttouchen.webflow.io/sporttouchen-camp-2023" target="_blank"><button class="popup-button">Gå till anmälan</button></a>
	</div>

	<!-- Synlig annons när pop-up fönstret klickas bort -->
	<div class="ad" id="ad">
		<span>Missade du anmälningen?</span>
		<a href="https://sporttouchen.webflow.io/sporttouchen-camp-2023" target="_blank"><button>Gå till anmälan</button></a>
	</div>

	<script>
		// Öppna pop-up fönster när sidan laddas
		window.onload = openPopup;

		function openPopup() {
			document.getElementById("overlay").style.display = "block";
			document.getElementById("popup").style.display = "block";
		}

		function closePopup() {
			document.getElementById("overlay").style.display = "none";
document.getElementById("popup").style.display = "none";
document.getElementById("ad").style.display = "block"; // Visa annons när pop-up fönstret stängs
}
</script>

</body>
</html>
Editor is loading...