内容图片弹窗-玄门社区-风水自学网

293 查看	0 回复

主题：内容图片弹窗 [收藏主题]

lan988 当前离线

288 主题	210 广播	31 粉丝

级别:管理员

用户积分:182 分
登录次数:1101 次
注册时间:2007-3-30
最后登录:2024-11-27
论坛高手

lan988 发表于：2024-7-4 23:53:07 | 显示全部帖子查看该作者主题楼主

// 假设你的div有一个id为"image-gallery"

document.getElementById('image-gallery').addEventListener('click', function(event) {

// 确保点击的是图片

if (event.target && event.target.nodeName === 'IMG') {

// 阻止点击事件冒泡

event.stopPropagation();

// 创建并显示弹窗

const imgSrc = event.target.src;

const imgAlt = event.target.alt || '';

const popup = document.createElement('div');

popup.className = 'popup';

popup.innerHTML = `<img src="${imgSrc}" alt="${imgAlt}">`;

document.body.appendChild(popup);

// 添加关闭按钮

const closeButton = document.createElement('span');

closeButton.className = 'close';

closeButton.innerHTML = '×';

popup.appendChild(closeButton);

// 关闭弹窗的事件监听

closeButton.addEventListener('click', function() {

popup.parentNode.removeChild(popup);

});

// 显示弹窗

popup.style.display = 'block';

}

});

</script>

<style>

/* 弹窗样式 */

.popup {

display: none;

position: fixed;

z-index: 1;

padding-top: 100px; /* Location of the box */

left: 30%;

top: 13%;

transform: translate(-30%, -10%);

width: 100%; /* Full width */

height: 75%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.9); /* Black w/ opacity */}

.popup img {

margin-top: -100px;

display: block;

max-width: 100%;

height: auto;

}

/* 关闭按钮样式 */

.close {

position: absolute;

top: 10px;

right: 10px;

color: #f1f1f1;

font-size: 15px;

font-weight: bold;

cursor: pointer;

background-color: rgba(0, 0, 0, 0.8);

padding: 12px;

border-radius: 50%;

}

.close:hover,

.close:focus {

color: #ff0000;

text-decoration: none;

outline: none;

}

</style>

分享到

专业从事风水，命理，择日，取名等。

本站是提供个人知识管理的网络存储空间，所有非本站原创内容均由用户发布，不代表本站观点。如发现有害或侵权内容，请点击这里举报

支持(0) |

反对(0)

顶端

底部

＜下一主题 | 上一主题＞

首页 1