JQuery + IE问题

发布于 2024-12-05 09:52:11 字数 1500 浏览 0 评论 0原文

我构建了此网站,严重依赖于 JQuery,并且遇到了 IE 的问题。

当您单击此图标时:

在此处输入图像描述

将出现一个自定义灯箱,并加载包含表单的 iframe。它在 Chrome/FF 中工作正常,但在 IE 中它说有一个错误:

在此处输入图像描述

我特意使用了JQuery 的非缩小版本来找出有问题的代码行,这似乎是:

fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;

此外,这是我为创建灯箱效果而编写的内容:

function popup(url, width, height)
{
    var shell = $('<div id="popup-shell"></div>');
    shell.append('<div style="margin-top: -' + height + 'px; width: ' + width + 'px; height: ' + height + 'px;" id="popup-inner"></div>');

    var inner = shell.find("div#popup-inner");

    var cb = $('<a style="margin-left: ' + Number(width - 26) + 'px;" id="popup-close"></a>');

    inner.append(cb);
    inner.append('<iframe width="' + width + '" height="' + height + '" src="' + url + '" scrolling="no" frameborder="0"></iframe>');

    cb.click(function()
    {
        shell.stop().animate({height: "0%"}, 700, 0, function()
        {
            shell.remove();
        });
    });

    shell.animate({height: "100%"}, 700, 0, function()
    {
        inner.animate({marginTop: "120px"}, 700);
    });

    $("body").append(shell);
}

如果这是一个已知问题,请提供任何建议或解决方案会很棒的。

I've built this website relying heavily on JQuery, and have run into an issue with IE.

When you click this icon:

enter image description here

There's a custom lightbox that comes down and loads an iframe holding a form. It works fine in Chrome/FF, but in IE it says there's an error:

enter image description here

I've purposely used the non-minified version of JQuery to work out which is the line of code in question, which appears to be:

fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;

Additionally, this is what I've written to create the lightbox effect:

function popup(url, width, height)
{
    var shell = $('<div id="popup-shell"></div>');
    shell.append('<div style="margin-top: -' + height + 'px; width: ' + width + 'px; height: ' + height + 'px;" id="popup-inner"></div>');

    var inner = shell.find("div#popup-inner");

    var cb = $('<a style="margin-left: ' + Number(width - 26) + 'px;" id="popup-close"></a>');

    inner.append(cb);
    inner.append('<iframe width="' + width + '" height="' + height + '" src="' + url + '" scrolling="no" frameborder="0"></iframe>');

    cb.click(function()
    {
        shell.stop().animate({height: "0%"}, 700, 0, function()
        {
            shell.remove();
        });
    });

    shell.animate({height: "100%"}, 700, 0, function()
    {
        inner.animate({marginTop: "120px"}, 700);
    });

    $("body").append(shell);
}

If this is a known problem, any suggestions or solutions would be great.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

著墨染雨君画夕 2024-12-12 09:52:11

首先将外壳对象附加到主体

$("body").append(shell);

,然后添加动画脚本,

shell.animate({height: "100%"}, 700, 0, function()
    {
        inner.animate({marginTop: "120px"}, 700);
    });

这应该可以解决您的问题。我在 IE 控制台模式下测试过,它有效

Append the shell object to body first

$("body").append(shell);

then add the animation script

shell.animate({height: "100%"}, 700, 0, function()
    {
        inner.animate({marginTop: "120px"}, 700);
    });

That should solve your problem. I did test it in IE console mode and it worked

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文