在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中的圖像創建自定義彈出式測試？

回答

相關問題