1

我知道已经有很多关于 CSS3 过渡在 Firefox 中不起作用的问题。我认为这可能是非常独特的。当添加到$(document).ready() . 但是，一旦我将相同的代码放入一个基本的 js 类并在其中实例化，$(document).ready它就拒绝在 firefox 24 中工作。在所有其他主要浏览器中都可以工作。

任何人都可以阐明一些观点。

我在这里建立了一个测试站点：http: //test.gladekettle.com.au/modal/

var ModalApp = function  (options) {
    //default options
    var defaultOptions = {
        modalElem       : "#modalresponsive",
        z               : 99,
        overflowvisible : true,
        scrollbardelay  : 1000
    }

    for (i=0; i < options.length;i++){
        if(typeof options[i] === "undefined"){ options[i] = defaultOptions[i];
        }
    } //for - set default options if not defined.

    var $modalObj = $(options.modalElem);
    var zindex   = options.z;

    $modalObj.css('z-index', zindex);
    $modalObj.addClass('modalhidden');

    this.close = function() {
        $modalObj.removeClass('scrollvisible');
        $modalObj.removeClass('modalvisible').addClass('modalhidden');
        $('.modalactive').removeClass('modalactive');
    };
    this.open = function() {
        $('html').addClass('modalactive');
        $modalObj.removeClass('modalhidden').addClass('modalvisible');

        setTimeout(function() {
            $modalObj.addClass('scrollvisible');
        }, options.scrollbardelay);

    };
};
4

1 回答 1

0

这与“外部 js 文件”无关。罪魁祸首是.modalactive { overflow: hidden; }，它在点击时被设置/取消设置，html并且似乎出于任何原因取消了过渡。您可以通过禁用规则来验证这一点，或者使用开发人员工具在您的站点上运行，或者查看这个 fiddle。

您应该提交错误并停止使用该规则。

于 2013-10-28T09:21:52.687 回答