0

有一个使用 FancyBox 的简单示例

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('#fbLink1').fancybox({
                'afterLoad': function() {
                    $('#fancyboxdiv').html('<h1>Fancybox first</h1>');
                    $('#fancyboxdiv').append('<a id="fbLink2" href="#fancyboxdiv" title="fancybox 2">Fancybox second</a>');
                },
                'afterClose': function() {
                    $('#fancyboxdiv').html('');
                }
            });
            $('#fbLink2').fancybox({
                'afterLoad': function() {
                    $('#fancyboxdiv').html('<h1>Fancybox second</h1>');
                    $('#fancyboxdiv').append('<a id="fbLink1" href="#fancyboxdiv" title="fancybox 1">Fancybox first</a>');
                },
                'afterClose': function() {
                    $('#fancyboxdiv').html('');
                }
            });
        });
    })(jQuery);
</script>
<div id="fancyboxdiv" style="display: none;"></div>     
<a id="fbLink1" href="#fancyboxdiv" title="fancybox first">First</a><br />
<a id="fbLink2" href="#fancyboxdiv" title="fancybox first">Second</a><br />

在 Chrome 浏览器中它运行良好，但在 Internet Explorer 中它不起作用。如何让它在 IE8 及更低版本中工作？

4

1 回答 1

0

首先检查fancybox文档-->FAQ选项卡--> No. 6。

这是典型的情况，在我看来，IE 是一个更好的浏览器，因为它不允许您与重复的元素进行交互（ID 应该是唯一的，并且两个元素在同一个文档ID中不能有相同的）ID

话虽如此，您正在做的是添加第二个元素，ID其中包含先前定义的 an ：

$('#fancyboxdiv').append('<a id="fbLink2" href="#fancyboxdiv" title="fancybox 2">Fancybox second</a>');

虽然其他浏览器允许您使用这种重复的 ID，但 IE 不会。

由于您已经使用它们的 ID 作为选择器为每个元素初始化了 fancybox $('#fbLink1').fancybox();，$('#fbLink2').fancybox();然后您只需要触发每个选择器（使用onclick）而不是添加重复的 ID，例如： 

(function ($) {
    $(document).ready(function () {
        $('#fbLink1').fancybox({
            beforeShow: function () {
                $('#fancyboxdiv').html('<h1>Fancybox first</h1>');
                $('#fancyboxdiv').append('<a onclick="javascript:$(\'#fbLink2\').click();" href="javascript:;" title="fancybox 2">Fancybox second</a>');
            },
            afterClose: function () {
                // $('#fancyboxdiv').html('');
                $('#fancyboxdiv').empty();
            }
        });
        $('#fbLink2').fancybox({
            beforeShow: function () {
                $('#fancyboxdiv').html('<h1>Fancybox second</h1>');
                $('#fancyboxdiv').append('<a onclick="javascript:$(\'#fbLink1\').click();" href="javascript:;" title="fancybox 1">Fancybox first</a>');
            },
            afterClose: function () {
                // $('#fancyboxdiv').html('');
                $('#fancyboxdiv').empty();
            }
        });
    }); // ready
})(jQuery);

这应该适用于任何浏览器（用 IE7 测试）

于 2013-03-22T22:41:17.080 回答