Skip to content

Instantly share code, notes, and snippets.

@RoyTakanen

RoyTakanen/index.html

Created January 24, 2020 05:34
Show Gist options
  • Save RoyTakanen/761e981c514ec4b00e49a8f15c43708f to your computer and use it in GitHub Desktop.
Save RoyTakanen/761e981c514ec4b00e49a8f15c43708f to your computer and use it in GitHub Desktop.
Download ZIP
Popop modaali 100% leveys ja korkeus jQuery
Raw
index.html
<!DOCTYPE html>
<html lang="fi" dir="ltr">
<head>
<meta charset="utf-8">
<title>Popup modaali</title>
<style media="screen">
body {
margin: 0;
}
.sulje {
background-color: red;
border-radius: 0;
font-size: 40px;
top: 0;
right: 0;
position: absolute;
border: 0;
transition: 0.4s;
}
.sulje:hover {
color: white;
background-color: black;
}
a {
color: blue;
}
a:hover {
text-decoration: underline;
color: lightblue;
}
.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><a type="button" onclick="avaatastatietoa(this)" data-ravintola="Helsingin herkullisin safkapaikka">Lue lisää...</a></center>
<center><a type="button" onclick="avaatastatietoa(this)" data-ravintola="Helsingin huonoin safkapaikka">Lue lisää...</a></center>
<hr>
</div>
<div class="contentalue" style="background: #000;height:100%; width: 100%;color:white; position: absolute; top:0; left:0">
<button type="button" name="button" class="sulje">&times;</button>
<h1>Hei <span id="ravintola"></span></h1>
</div>
<script>
$(".contentalue").css("display", "none");
function avaatastatietoa(kohde) {
$(".contentalue").css("display", "block");
$(".contentalue #ravintola").text($(kohde).data('ravintola'));
}
$(".sulje").click(function() {
$(".contentalue").css("display", "none");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment