Interactivity means we have to respond to "events."1

First let's see how to make a dynamic popup:

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

How should we read this? We create a Javascript variable "popup" and assign to it an object created by L.popup(). The popup has attributes set by the methods setLatLng and setContent and then gets added to the map by "openOn" method.

Next we'll see how we define an event handler

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

Note that we will only use the second bit of code - we are asking Leaflet to respond to the event of a mouse click by noting where on the map (lat and long) the click happened and then send this information to the Leaflet popup method which we have "stored" in the variable "popup."

++++ My Leaflet GIS Work
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map { height: 300px; width: 800px;  background-color: black; margin: auto;}
</style>
</head>

<body>
<h3>Version 0.9</h3>

<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);

 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'Map data &copy; <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY-SA </a>, Imagery <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors',
     maxZoom: 18
 }).addTo(map);

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);

marker.bindPopup("<h4>Marker Info</h4>Here is all you need to know.").openPopup();
circle.bindPopup("This object is a red circle.");
polygon.bindPopup("This polygon has several vertices.");

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

</script>

</body>

My Leaflet GIS Work