在CSS/HTML中彈出消息

基本上我有一張地圖，當我將鼠標懸停在其中一個狀態以獲取顯示狀態名稱的彈出消息時，這是我迄今所做的：（這只是部分的代碼）在CSS/HTML中彈出消息

var states = map.selectAll('path.state') 
.data(states.features) 
    .enter().append('path') 
    .attr('class', 'state') 
    .attr('id', function(d) {console.log(d);return d.id;}) 
    .attr('d', path) 
    .attr("stroke","white") 
    .attr("stroke-width",2) 
    .attr('fill', 'lightgreen') 
    .on("mousemove",fnk) 
    .on("mouseout",fnk2)

當函數「fnk()」被調用（上mousemove），它主要強調了綠色的狀態，它存儲的名稱狀態變量「dsa」。

function fnk() { 
asd = d3.select(this).style("fill","green"); 
dsa = asd.data()[0].properties.gn_name;}

現在我想做出什麼是，在可變dsa該數據被示出爲在某種彈出消息或鼠標的同時被放置在一個狀態是活動的一些矩形元件的用戶。我嘗試使用「警報」，但用戶需要點擊「確定」按鈕才能刪除該消息，並且我希望消息自行消失。

來源

2015-04-18 Sir DrinksCoffeeALot

您可能想要添加更多關於您正在使用的地圖提供程序和/或jQuery插件的信息。像OpenStreetMap/OpenLayers或谷歌地圖等地圖提供商通常提供在其各自的API中創建彈出窗口/信息窗口的功能，但它們以不同的方式進行。作爲任意選擇的示例，請參閱https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple Google地圖和http://dev.openlayers.org/examples/osm-marker-popup.html/http://dev.openlayers.org/examples/osm-marker-popup.js用於OpenLayers。 –

（以前的評論不適合）。此外，還有jQuery插件，您可以使用更通用的插件。這個任意選擇的網站（http://www.sitepoint.com/10-jquery-popup-window-image-slider-plugins/）列出了其中的一些，但我沒有檢查該選擇的當前情況。 –

使用包含要創建的地圖的所有請求座標的json文件。我只是試圖找到一種方式，當鼠標移動到其中一個狀態時，如何在其中添加狀態名稱的矩形。 –

我將創建一個號碼的div爲彈出元件使用的，上述每一狀態他們的位置，並設置其CSS

visibility: hidden

然後內部FNK

<"your pop-up element">.style("visibility", "hidden")

當然，做相反的fnk2

.style("visibility", "visible")

我不知道很多關於在DOM的DOM處理，但這真的是古老的anyw唉。

你應該看看JQuery，你可以讓東西淡入淡出（而不是像我貼的代碼一樣消失和出現）。更不用說，它需要更少的代碼，並且在瀏覽器中更便攜。

來源

2015-04-18 10:53:34

是的，但這意味着我必須創建XY數量的div，並且當您將鼠標懸停在狀態上時，狀態的名稱將放置在變量中。我只是試圖找到一種方法來顯示鼠標懸停在特定狀態時激活的矩形中的可變數據。 –

JavaScript只有確認，提示和提示對話框，所有3個都需要按下按鈕，所以如果您正在尋找一種單線JS解決方案，那麼您運氣不好。 –

在CSS/HTML中彈出消息

回答

相關問題