Open Fancybox Iframe when click on a link in a Leaflet Popup

Question

I made a map with Leaflet. This map is composed of points ; when a user clicks on a point, it opens a pop-up with an information and a link to open a form in a new page. It's pretty good.
Now I'd like that the link opens in a iframe instead of that new page. I want to use FancyBox.

To do so I put the Fancybox links to in my html page (I have the version 1.9.1 of JQuery) :

<link rel="stylesheet" href="/maquette/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript" src="/maquette/biblio/jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $("#various3").fancybox({
            'width'         : '95%',
            'height'        : '95%',
            'autoScale'     : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'          : 'iframe'
        });

        });
</script>

The html file calls a JS file, in which I build my map. I configured the pop up like this :

   var pl = L.geoJson(ptslum, {
    pointToLayer: function (feature, latLng) {
      return new L.Marker(latLng, {
        icon: new myIcon({
          iconUrl: '/maquette/css/iconPL2.png'
        })
      }).bindPopup("<b><center><FONT color = 999999> La référence du point lumineux sélectionné est </b>" + "<b>" + feature.properties.pl_ref_sdeer + "</b></FONT><br><br>" 
        + "<a class = \"iframe\" href = \"form/declapanne.php?id=" + feature.properties.pl_ref_sdeer + "\"> Cliquer pour déclarer la panne</a></center> "                       
        );
  }
});

But nothing happens : the form is always in a new page..

Do you know how to make that connection between Leaflet and FancyBox ?

Thanks !

Answer 1

The popup's content get added to the DOM when the popup opens and get removed when the popup closes. So if you need to do something to/with the content in your popup you'll need to do it when the popup has opened. You can listen for the popupopen event fired by your L.Map instance:

var map = new L.Map('leaflet')
    .setView([0, 0], 0);

var marker = new L.Marker([0, 0])
    .bindPopup('<div id="foo"></div')
    .addTo(map);

document.getElementById('foo'); // Nope

map.on('popupopen', function () {
    document.getElementById('foo') // Yup
})

map.on('popupclose', function () {
    document.getElementById('foo') // Nope
})

So when using Fancybox you can only initialize after the popup has opened, given this popup content:

<a id="single_image" href="image_big.jpg">
    <img src="image_small.jpg" alt=""/>
</a>

You would initialize Fancybox on popupopen like this:

map.on('popupclose', function () {
    $("a#single_image").fancybox();
})