Skip to content

Instantly share code, notes, and snippets.

@RoyTakanen

RoyTakanen/coolpopupmodal.html

Created January 23, 2021 10:48
Show Gist options
  • Save RoyTakanen/117b871db4f03aa3ddf32dd2a3c1c0d4 to your computer and use it in GitHub Desktop.
Save RoyTakanen/117b871db4f03aa3ddf32dd2a3c1c0d4 to your computer and use it in GitHub Desktop.
Download ZIP
Popup modal
Raw
coolpopupmodal.html
<!DOCTYPE html>
<html lang="fi" dir="ltr">
<head>
<meta charset="utf-8">
<title>Popup modaali</title>
<style media="screen">
body {
margin: 0;
}
button {
padding: 8px;
border-radius: 16px;
border: 0;
transition: 0.4s;
}
button:hover {
background-color: black;
color: white;
}
.sulje {
background-color: red;
border-radius: 0;
font-size: 20px;
top: 0;
right: 0;
position: absolute;
}
.modaali1 {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="muuteimodaalit">
<hr>
<center><button type="button" class="avaa" name="button">Avaa modaali</button></center>
<hr>
</div>
<div class="modaali1">
<button type="button" name="button" class="sulje">&times;</button>
<h1>Hei</h1>
</div>
<script>
$(".avaa").click(function() {
$(".modaali1").css("display", "block");
$(".muuteimodaalit").css("display", "none");
});
$(".sulje").click(function() {
$(".modaali1").css("display", "none");
$(".muuteimodaalit").css("display", "inline");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment