Leaflet popup close button

Question

I'm making a leaflet map for my own website, I'm not good at javascript html and css, so that's why I going to ask this question here..

Is there anybody who know how to add a X (Close button) to the right corner?

The code I am using can be found over here:

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);
    });

The code above her is for opening the popup.

Answer 1

When you click any of the dots, the info box is shown using

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

You can add an extra element inside the box that does the opposite (.fadeOut("fast")) when you click it:

HTML:

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

JS:

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

Working demo: jsFiddle

The only styling I added is to position the X in the top right, but obviously you can do whatever you want with it. All that matters is binding the fadeOut method to the click event to close the popup again.