超图中 点击地图坐标点 显示一个宽984px 高640px 居中的盒子 前端代码实现
时间: 2023-11-06 20:04:07 浏览: 100
使用CSS实现盒子水平垂直居中的方法(8种)
5星 · 资源好评率100%
您可以使用CSS和JavaScript来实现这个功能。以下是一个简单的实现方式:
HTML代码:
```
<div id="map"></div>
<div id="popup">
<iframe src="your_content_url"></iframe>
</div>
```
CSS代码:
```
#map {
width: 100%;
height: 100%;
}
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 984px;
height: 640px;
background-color: white;
z-index: 9999;
display: none;
}
#popup iframe {
width: 100%;
height: 100%;
border: none;
}
```
JavaScript代码:
```
// 获取地图元素
var map = document.getElementById("map");
// 点击地图坐标点时显示弹出框
map.addEventListener("click", function(event) {
// 获取点击坐标点的位置
var x = event.pageX;
var y = event.pageY;
// 设置弹出框的位置
var popup = document.getElementById("popup");
popup.style.left = x + "px";
popup.style.top = y + "px";
popup.style.display = "block";
});
// 点击弹出框外部区域时隐藏弹出框
window.addEventListener("click", function(event) {
var popup = document.getElementById("popup");
if (event.target != popup && event.target.parentNode != popup) {
popup.style.display = "none";
}
});
```
注意,上述代码中的 `your_content_url` 需要替换为您要显示的内容的URL地址。
阅读全文