<figure class="popup">
<img class="js_trigger_sample" src="https://placehold.jp/150x150.png" alt="ポップアップ">
<figcaption class="default in_design"><img src="https://placehold.jp/1x1.png" alt="ポップアップ"></figcaption>
</figure>figcaption.default {
display: none;
}
figcaption.active {
display: block;
}
figcaption.in_design {
background-color: #000;
opacity: 0.9;
}
.active.in_design {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.in_design img {
width: 62%;
height: 62%;
margin: 19% auto;
}$(window).on("load", function () {
$(".js_trigger_sample").on("click", function () {
var elm = $($(this).parent()).find(".default"), tmp = $(this).attr("src");
elm.addClass("active");
elm.removeClass("default");
elm.find("img").attr("src", tmp)
});
});
External CSS
This Pen doesn't use any external CSS resources.