Leaflet popup close button

[Joey Kieboom]

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.

thanks guys!

[Iván Sánchez Ortega]

On Friday, 1 May 2015 09:42:20 UTC+2, Joey Kieboom wrote:

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

Do not reinvent the wheel - Try using Leaflet popups. They have a close button by default.

[Kathy Breen]

Leaflet popups do have a close button, but it looks like what you want is not for a popup to open on the marker location, but in the upper right hand corner, correct?  If all you want is a little "x" in the corner of your div that responds to a click event, try something like this:

Add this html to your popup div:

    <div class="closeDiv">
        <button type="button" onclick="close()">x</button>
    </div>

CSS:

.closeDiv {
    width: 100%;
    height: 25px;
}

.closeDiv button {
    float: right;
}

Javascript:

function close(){
document.getElementById("feature_infos").display = "none";
}

When you want the popup to open again, you'll have to change the display property back to the default, which is "block".