如何将灯箱添加到网页链接

How to add a lightbox to webpage links

本文关键字：网页 链接 添加      更新时间：2023-09-26

谁能帮我显示灯箱弹出窗口的链接，如下所示，

1） 测试1 2） 测试2 3） 测试3

当任何人点击下面的链接时，它应该显示在jquery灯箱中，而不是在目标空白中打开或在同一浏览器上重定向。

如果你使用fancybox插件，这将起作用。

<a id="manual1" data-image="/example-full.jpg,/example-full-2.jpg'><img src="/example-thumb.png" alt="example" /></a>
<script type="text/javascript">
$('#manual1').click(function() {
    var data = $(this).data('images').split(','),
        options = {
            padding : 38,
            nextEffect : 'fade',
            prevEffect : 'fade',
            type: 'image'
        };
    $.fancybox.open(data , options );
})
 </script>

小提琴是：http://jsfiddle.net/voigtan/jJpAM/2/

我认为这会起作用

<script type="text/javascript">
 $(document).ready(function() {
 $("a", ".rest-menuitem").click(
   function(event) {
    event.preventDefault();
    var elementURL = $(this).attr("href");
    $.colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});
   });
 });
</script>

根据您的内容设置内部宽度和内部高度。

相关文章：