HTML在javascript中使用lightbox显示图像_Javascript_Jquery_Html

HTML在javascript中使用lightbox显示图像

javascript jquery html

HTML在javascript中使用lightbox显示图像,javascript,jquery,html,Javascript,Jquery,Html,我正在将复活节彩蛋添加到我的个人页面中，我使用以下代码：我希望在执行序列时，lightbox或modal中的图像会出现，而不是我在$.konami函数中发出的警报。我不想在html的结构中添加图像，这可能吗？如果您不想使用其他插件并且只依赖jQuery，您可以这样做，假设您的html看起来是这样的： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQue

我正在将复活节彩蛋添加到我的个人页面中，我使用以下代码：

我希望在执行序列时，lightbox或modal中的图像会出现，而不是我在$.konami函数中发出的警报。我不想在html的结构中添加图像，这可能吗？

如果您不想使用其他插件并且只依赖jQuery，您可以这样做，假设您的html看起来是这样的：

<!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>

基本上，我们将添加三个元素，一个大的元素将覆盖页面，背景为黑色，不透明度为0.4，另一个元素，你猜，将是你的模式，在它里面是一个。在函数启动之前，这些元素不会出现在页面中，但是如果它们的样式已经存在于CSS文件中，就更容易了。然后，这就是jQuery代码：

基本上，当函数被调用时，元素被附加到函数中并使其可见

你可以在网上看到它

<!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>

.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;
}

$(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();
  });
});