传单弹出关闭按钮

Question

我正在为自己的网站制作传单地图，我不擅长javascript html和css，所以我才会在这里问这个问题..

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

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

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

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

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

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 方法绑定到单击事件以再次关闭弹出窗口。

传单弹出关闭按钮

Leaflet popup close button

html

javascript

google-maps

leaflet