我试图在特定的 pin 上弹出一条测试消息，但无法做到。
我有四个不同的 Pin，分别命名为红色、蓝色、绿色和黄色。
当我点击下图中的黄色针点
我在下面的图片中收到以下弹出消息
但是，我想在下面给定的图像样式中显示弹出窗口。
我试过下面给出的代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/pin.css" />
</head>
<script>
function myfunction()
{
var div = document.createElement('div');
div.className += 'popup';
div.innerHTML = 'This is a Tool Tip Pop UP';
document.body.appendChild(div);
}
</script>
<body>
<h2>India Map</h2>
<img border="0" src="img/indiaMap.png" alt="Pulpit rock" width="308" height="475">
<div class ="pinArea">
<img src="img/blue.png" id="redpin" onclick="alert('Hi, I am Blue');"/>
</div>
<div class ="pinArea" style=" top:64px;left:83px; position:absolute;" onclick="myfunction()">
<img src="img/yellow.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style=" top:90px;left:90px; position:absolute;">
<img src="img/red.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style=" top:90px;left:120px; position:absolute;">
<img src="img/green.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style="top:200px;">
<img src="img/blue.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style="top:220px; left 120px; position:absolute;">
<img src="img/red.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style="top:230px; left:83px; position:absolute;">
<img src="img/green.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style="top:240px; left:90px; position:absolute;">
<img src="img/yellow.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style="top:300px;">
<img src="img/blue.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style="top:400px; right:">
<img src="img/blue.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
<div class ="pinArea" style="top:500px;">
<img src="img/blue.png" id="redpin" onclick="alert('Hi, I am Blue);"/>
</div>
</body>
</html>
最佳答案
将以下样式添加到您的弹出窗口 您的 HTML:
<div class="popup" style="background: red; border-color: red;">University</div>
你的 CSS:
.popup {
margin: 10px;
padding: 25px;
position: relative;
width:50px;
}
.popup:after {
content: "";
position: absolute;
top: 100%;
left: 20px;
border-top: 20px solid blue;
border-top-color: inherit;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
http://jsfiddle.net/ShinyMetilda/Fz2YF/1/
相对于 pin 位置定位弹出元素。它应该为您提供所需的样式
试试下面的 fiddle :
http://jsfiddle.net/ShinyMetilda/8y5Aj/2/
这是为了关闭 div。您可以使用“x”图像代替按钮来实现同样的效果。
类似地再次显示弹出窗口你可以使用
document.getElementById("popUpDiv").style.display = " block ";
可以检查链接
关于javascript - 在 phonegap 中对图像创建自定义弹出测试？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22783150/