打开Fancybox Iframe，点击传单弹出框中的链接

我用Leaflet制作了一张地图。这张地图由点组成;当用户点击一个点时，它会打开一个弹出窗口，其中包含一个信息和一个链接，用于在新页面中打开表单。这个很不错。
现在我希望链接在iframe中打开，而不是在新页面中打开。我想使用FancyBox。打开Fancybox Iframe，点击传单弹出框中的链接

要做到这一点，我把链接的fancybox在我的html页面（我有版本的jQuery 1.9.1）：

<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>

HTML文件调用JS文件，在其中我建立我的地图。我配置了弹出这样的：

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

但没有任何反应：形式始终处于一个新的页面..

你知道如何使单张及的fancybox之间的联系？

谢谢！

来源

2015-11-02 Julien

这听起来更像是配置正确的链接来做你想做的事情的问题。标记弹出窗口显示一些常规的HTML内容，所以我怀疑Leaflet与你的问题有关。 – ghybs

弹出窗口的内容会在弹出窗口打开时被添加到DOM，并在弹出窗口关闭时被删除。因此，如果您需要对弹出窗口中的内容执行操作，您需要在弹出窗口打开时执行此操作。你可以听由你L.Map实例触发的popupopen事件：

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

所以使用的fancybox，当你只能初始化弹出打开后，给这个弹出内容：

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

你会初始化的fancybox on popupopen是这样的：

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

来源

2015-11-02 17:42:17 iH8

打开Fancybox Iframe，点击传单弹出框中的链接

回答

相关问题