这样设置后悬浮窗更加靠下,甚至当前页面只显示一半图片
时间: 2024-04-14 20:27:19 浏览: 28
如果设置后悬浮窗显示位置靠下,并且当前页面只显示一半图片,可能是由于计算偏移量的方式不正确导致的。请尝试修改以下代码:
```javascript
// 居中弹出窗口
function centerPopup() {
var windowHeight = window.innerHeight;
var popupHeight = popup.offsetHeight;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var offset = (windowHeight - popupHeight) / 2 + scrollTop;
// 设置弹出窗口的垂直位置
popup.style.top = offset + "px";
}
```
请确保在计算 `offset` 值时,使用的是 `popup` 元素的高度,而不是 `popupImg` 元素的高度。修改后,请再次测试并确认悬浮窗是否能够在页面的中心位置显示。
相关问题
根据上面设置后放大的悬浮窗仍然考下
如果按照上述修改后,悬浮窗仍然无法正确显示在页面中心,可能是由于计算偏移量时的某些问题。我注意到您的代码中使用了`offsetWidth`和`offsetHeight`来获取弹出窗口的宽度和高度,但这些值可能不准确,特别是在图片加载完成之前。
为了避免这个问题,您可以使用`getBoundingClientRect()`方法来获取弹出窗口的准确尺寸。请尝试将以下代码替换您的`centerPopup()`函数中的对应部分:
```javascript
var popupRect = popup.getBoundingClientRect();
var popupWidth = popupRect.width;
var popupHeight = popupRect.height;
```
这样可以确保在计算偏移量时使用准确的尺寸。
另外,关于图片无法再次点击放大的问题,您可以尝试将点击事件监听器绑定在弹出窗口上,而不是图片上。例如,将以下代码添加到`setPopupStyle()`函数中:
```javascript
popup.onclick = function (event) {
if (event.target === popup) {
popup.style.display = "none";
}
};
```
这样点击弹出窗口的任何区域都会隐藏弹出窗口,而点击图片则不会触发事件。
希望这些修改可以解决您遇到的问题。如果问题仍然存在,请提供更多细节或代码片段,以便我更好地理解并帮助您解决问题。
html 显示图片 悬浮窗
以下是使用HTML显示图片和创建悬浮窗的示例代码:
1. 显示图片:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
```
2. 创建悬浮窗:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.floating-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="floating-window">
<!-- 悬浮窗内容 -->
</div>
</body>
</html>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)