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

我想在特定的引脚上弹出测试消息，但无法执行。 I've Four different Pin named Red, Blue, Green and Yellow. 当我在下面的图片点击黄色针点在phonegap中的图像创建自定义弹出式测试？

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>

来源

2014-04-01 NextStep

Refer- https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-popup/ – Suhas

@Suhas谢谢回答，请告诉我如何添加map.js代码与我的代码。 – NextStep

@Suhas我只使用图像 – NextStep

以下样式添加到您的弹出你的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/

位置弹出元素相对于销position.It应该给你所需要的造型

尝试以下小提琴：

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

这是关闭div.You可以使用“x”图片而不是按钮来实现相同。

同样再次显示弹出你可以使用

的document.getElementById（ “popUpDiv”）的style.display = “块”。

其可能的检查链接

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

来源

2014-04-02 08:11:39 ShinyJos

感谢您的回复。我在jsfiddle检查它，但是，我怎么能关闭流行音乐，请你解释我..谢谢 – NextStep

请更新您的答案... – NextStep

检查更新小提琴，让我知道 – ShinyJos

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

回答

相关问题