index.html
<!DOCTYPE html>
<html>
<head>
<style>
.popup{
width: 900px;
margin: auto;
text-align: center
}
.popup img{
width: 200px;
height: 200px;
cursor: pointer
}
.show{
z-index: 999;
display: none;
}
.show .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.66);
position: absolute;
top: 0;
left: 0;
}
.show .img-show{
width: 600px;
height: 400px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden
}
.img-show span{
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
cursor: pointer;
}
.img-show img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".show").fadeOut();
});
});
</script>
</head>
<body>
<div class="popup">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg">
<img src="https://pbs.twimg.com/media/CX1PAZwVAAANemW.jpg">
<img src="http://images5.fanpop.com/image/photos/30900000/beautiful-pic-different-beautiful-pictures-30958249-1600-1200.jpg">
</div>
<div class="show">
<div class="overlay"></div>
<div class="img-show">
<span>X</span>
<img src="">
</div>
</div>
</body>
</html>
Cửa sổ Popup Hình ảnh Đơn giản
index.html
<!DOCTYPE HTML><html><head><meta charset="UTF-8">
<title>As Simple As It Gets CSS Popup Image Demo 1</title>
<style type="text/css">
#cartwrap {
position:relative;
width:252px;
height:252px;
}
.cart img {
border:1px solid #000;
margin:3px;
float:left;
}
.cart span {
position:absolute;
visibility:hidden;
}
.cart:hover, .cart:hover span {
visibility:visible;
top:0;
left:250px;
z-index:1;
}
</style>
</head>
<body>
<h2>As Simple As It Gets CSS Popup Image</h2>
<div id="cartwrap">
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link2.jpg" alt=""><span><img src="../media/tamilrokers-new-link2big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link2.jpg" alt=""><span><img src="../media/tamilrokers-new-link2big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link2.jpg" alt=""><span><img src="../media/tamilrokers-new-link2big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link2.jpg" alt=""><span><img src="../media/tamilrokers-new-link2big.jpg" alt=""></span></a>
<a class="cart" href="#"><img src="../media/tamilrokers-new-link1.jpg" alt=""><span><img src="../media/tamilrokers-new-link1big.jpg" alt=""></span></a>
</div>
</body>
</html>
Hy vọng bạn đã có ý tưởng về onclick image popup jquery(làm thế nào để tạo một hình ảnh pop up trong html?).
- Bài đăng trên blog này ban đầu được xuất bản tại: https://www.pakainfo.com
