类似模态框,当然用其他插件可能更方便
引入jQuery,然后给所有要实现点击弹出放大效果的图片添加一个类名为imglist
然后在js中使用如下代码:
$(".imglist").click(function() {
var modal = $("<div></div>").css({
"position": "fixed",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"background-color": "rgba(0,0,0,0.5)",
"display": "flex",
"justify-content": "center",
"align-items": "center"
});
$("body").append(modal); var modalImg = $("<img>").attr("src", this.src).css({
"display": "block",
"margin": "auto",
"max-width": "80%",
"max-height": "80%"
});
modal.append(modalImg); modal.click(function() {
$(this).remove();
});
});