在修改仍然存在添加图片时就出现悬浮窗的问题
时间: 2024-04-17 19:27:36 浏览: 102
非常抱歉,我之前的回答仍然有误。我再次检查了你的代码,并发现了问题所在。问题在于 `showPopup` 函数中的逻辑判断条件没有正确设置。
请尝试使用以下修正后的代码:
```javascript
var isImageAdded = false; // 图片是否已经添加的标记
var isPopupVisible = false; // 悬浮窗显示状态
function previewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("img");
img.src = e.target.result;
img.alt = "照片";
// 隐藏原始的input元素
input.style.display = "none";
// 添加图片到input元素的父节点
input.parentNode.appendChild(img);
isImageAdded = true; // 图片已经添加标记为true
// 添加图片点击事件处理函数
img.onclick = function () {
if (isImageAdded && !isPopupVisible) {
showPopup(img.src); // 点击图片放大时显示悬浮窗
}
};
};
reader.readAsDataURL(input.files[0]);
}
}
function showPopup(src) {
isPopupVisible = true; // 设置悬浮窗显示状态为true
var overlay = document.createElement("div");
overlay.style.position = "fixed";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
overlay.style.zIndex = "9998"; // 设置遮罩层的z-index低于悬浮窗,但高于其他元素
document.body.appendChild(overlay);
var popup = document.createElement("div");
popup.style.position = "fixed";
popup.style.top = "50%";
popup.style.left = "50%";
popup.style.transform = "translate(-50%, -50%)";
popup.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
popup.style.zIndex = "9999";
popup.style.width = "75%"; // 设置悬浮窗宽度为页面宽度的75%
popup.style.height = "75%"; // 设置悬浮窗高度为页面高度的75%
popup.style.overflow = "hidden";
// 悬浮窗的内容和逻辑...
// ...
overlay.onclick = function () {
document.body.removeChild(popup);
document.body.removeChild(overlay);
isPopupVisible = false; // 设置悬浮窗显示状态为false
};
document.body.appendChild(popup);
}
```
通过在 `showPopup` 函数中设置 `isPopupVisible` 的值,确保只有在悬浮窗未显示时才显示悬浮窗。请尝试使用上述修正后的代码。如果仍然遇到问题,请提供更详细的代码和相关描述,以便我更好地帮助你解决问题。
阅读全文