$(document).ready(function(){
$("#changeColor").on("click", function() {
var color = prompt("Ange ny textfärg");
$("*").css("color", color);
});
$("img.bigImage").on("click", function() {
var src = $(this).attr("src");
$("body").prepend("<img src='" + src + "' style='position: fixed; width: 50%; left: 25%; top: 10%; z-index: 6; border: 10px solid #fff; box-shadow: 0 0 20px #000; display: none;' id='imageModal'>")
$("body").prepend("<div id='backgroundModal' style='top: 0; bottom: 0; left: 0; right: 0; position: fixed; background-color: rgba(0,0,0,0.5); display:none; z-index: 5;'></div>");
$("#backgroundModal").fadeIn(500);
$("#imageModal").fadeIn(500);
$("#backgroundModal").on("click", function() {
$("#backgroundModal").fadeOut(500);
$("#imageModal").fadeOut(500);
setTimeout(function() {
$("#backgroundModal").remove(500);
$("#imageModal").remove(500);
}, 500);
})
});
});
Here is my code but it doesn’t work
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="changeColor">Change Color</button>
<img class="bigImage" src="https://www.gramps-project.org/wiki/images/2/22/Macos_200x200.png">
</body>
</html>