Question

我试图在特定引脚上弹出测试消息，但无法做到。 I've Four different Pin named Red, Blue, Green and Yellow. 当我点击下图中的黄色针点

时

enter image description here

我在下方图片中收到以下弹出消息

enter image description here

但是，我希望在给定的图像样式下显示下面的弹出窗口。

enter image description here

我已尝试过以下代码

<!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>

Answer 1

在弹出窗口中添加以下样式你的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/

将弹出元素相对于针位置定位。它应该为您提供所需的样式

尝试以下小提琴：

http://jsfiddle.net/ShinyMetilda/8y5Aj/2/

这是关闭div。您可以使用“x”图像而不是按钮来实现相同的效果。

类似于再次显示弹出窗口，您可以使用

document.getElementById（“popUpDiv”）。style.display =“block”;

可以检查链接

http://jsfiddle.net/ShinyMetilda/JTQzk/1/

在phonegap中为图像创建自定义弹出式测试？

1 个答案: