HTML show image with lightbox in javascript
Question
I'm adding an easter egg into my personal page, I'm using this piece of code from the konami.js :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Konami # Letterable Konami-Code</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<p>T E S T I N G P A G E.</p>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/jquery.konami.js"></script>
<script>
var win = $(window),
body = $('body');
// or use the default `↑ ↑ ↓ ↓ ← → ← → B A`
$.konami(function() {
alert("Show image");
});
</script>
</body>
</html>
I want that when the sequence is executed, an image inside a lightbox or a modal appears instead of the alert I putted on the $.konami function. I don´t want to add an image in the structure of the html, is this possible?
1 answers
solution1
0 ACCPTED 2015-09-14 02:24:12
If you don't want to use other plugins and rely only on jQuery you can do something like this, let's say your HTML looks like that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Konami # Letterable Konami-Code</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<p>T E S T I N G P A G E.</p>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/jquery.konami.js"></script>
<script>
//Insert code here
</script>
</body>
</html>
You can just write a couple of lines of jQuery and some lines of CSS and you're done. Here's the CSS part for the elements we're going to create through jQuery when the combination is fired:
.modal{
position:absolute;
z-index:100;
border: 1px solid #000;
border-radius: 6px;
background: #fff;
padding: 20px;
top: 100px;
left: 200px;
display:none;
}
.modal img{
width: 150px
}
.light{
position: fixed;
height:100%;
width:100%;
background: rgba(0,0,0,0.4);
top:0;
left:0;
display:none;
}
Basically we're going to add three elements, a big <div class="light"> that will cover the page and have as background a black color with opacity 0.4, another <div class="modal"> which, you guessed, will be your modal and inside it a <img> . Those elements are not in the page until the function gets fired but it's easier if their style is already in the CSS file. Then, that's the jQuery code:
$(document).ready(function(){
$.konami(function() {
$('body').append('<div class="light"><div class="modal"><img src="https://pbs.twimg.com/profile_images/3190248843/9d85cb3312179987e6f25febd52e5fa2_400x400.png"/></div></div>');
$('.light, .modal').fadeIn();
});
});
Basically, when the function gets called the elements get appended to the <body> and made visible.
You can see it live here on JSFiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.