<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/jquery-3.4.1.min.js"></script>
<title>Document</title>
<style>
.bor{
border: 2px solid red;
width: 400px;
height: 200px;
text-align: center;
}
#main {
margin-top: 50px;
border: 1px solid black;
cursor: pointer;
padding: 30px;
}
#qrcode img {
position: absolute;
top: 50%;
left: 40%;
width: 300px;
height: 300px;
display: block;
}
#qrcode {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
z-index: 9999;
display: none;
}
</style>
</head>
<body>
<div class="bor">
<button class="main">點擊此處 彈出你想要的</button>
<div class="qrcode">
<img class="image" width="100%" height="100%" src="img/12.png">
</div>
</div>
<div class="bor">
<button class="main">點擊此處 彈出你想要的</button>
<div class="qrcode">
<img class="image" width="100%" height="100%" src="img/12.png">
</div>
</div>
<script>
//當本頁面有兩個按鈕點擊事件的時候，不適合用id（因為id是唯一的），需要把id換為class，最為簡單的修改方法；
// 這樣才會是實現你想要的效果，點擊按鈕彈出圖片
$(function() {
$(".main").click(function() {
$(".qrcode").fadeIn("slow");
});
$(".qrcode").click(function() {
$(".qrcode").fadeOut("slow");
})
});
//該段代碼適合本頁面只有一個按鈕點擊
$(function() {
$("#main").click(function() {
$("#qrcode").fadeIn("slow");
});
$("#qrcode").click(function() {
$("#qrcode").fadeOut("slow");
})
});
</script>
</body>
</html>
以上是運用jquery里面的fade()函數寫的點擊事件。
下面這個是用傳統的onclick寫出來的，有一點點小問題，剛開始是有效的，今天重新寫出來之后不知道為什么沒效果了，大家可以幫我看下，我也發布出來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/jquery-3.4.1.min.js"></script>
<title>Document</title>
<style>
.bor{
border: 2px solid red;
width: 400px;
height: 200px;
text-align: center;
}
#main {
margin-top: 50px;
border: 1px solid black;
cursor: pointer;
padding: 30px;
}
#qrcode img {
position: absolute;
top: 50%;
left: 40%;
width: 300px;
height: 300px;
display: block;
}
#qrcode {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
z-index: 9999;
display: none;
}
</style>
</head>
<body>
<div class="bor">
<button id="main">點擊此處 彈出你想要的</button>
<div id="qrcode">
<img id="image" onclick="test(this)" width="100%" height="100%" src="img/12.png">
</div>
</div>
<div class="bor">
<button id="main">點擊此處 彈出你想要的</button>
<div id="qrcode">
<img id="image" onclick="test(this)" width="100%" height="100%" src="img/12.png">
</div>
</div>
<script>
// 傳統的方法來寫，onclick
function test(obj){
console.log("11111")
$(obj).next().fadeIn("slow");
$(obj).next().click(function() {
$(this).fadeOut("slow");
})
var hh = $(obj).next().html();
console.log(hh)
}
</script>
</body>
</html>