Leaflet弹出窗口关闭按钮

Question

我正在为自己的网站制作一个leaflet地图，我不擅长javascript、html和css，所以我在这里提出了这个问题。

有人知道如何在右上角添加一个X（关闭按钮）吗？

我使用的代码可以在这里找到：

http://jsfiddle.net/z1nw3pt4/2/

layer.on('click', function (e) {
        document.getElementById("info").innerHTML = feature.properties.name;
        $("#feature_infos").stop();
        $("#feature_infos").fadeIn("1000");

        console.log(feature.properties.name);
    });

上面的代码是用于打开弹出窗口的。

- Joey K

Answer 1

当您点击任意一个点时，信息框将使用以下方式显示：

$("#feature_infos").fadeIn("fast");

你可以在盒子内添加一个额外的元素，当你点击它时，执行相反的操作(.fadeOut("fast"))：

HTML:

<span class="close">X</span>

JS：

$('.close').click(function() {
   $('#feature_infos').fadeOut('fast'); 
});

工作演示: jsFiddle

我添加的唯一样式是将X定位在右上角，但是显然您可以根据自己的需要进行任何操作。最重要的是将fadeOut方法绑定到单击事件上以再次关闭弹出窗口。

- Stephan Muller