Question

我在名为overlay.js的文件中有以下代码：

Event.observe(window, 'load', function() {
    emailSignUp();
});

function emailSignUp() {
    var x = new Overlay();
    x.show('<div class="popup"><div class="close">[ <a href="#" onclick="x.hide(); return false;">Close Window</a> ]</div></div>', {
        position: 'center',
        modal: true,
        animate: true,
        auto_hide: false,
        click_hide: false,
        opacity: 1,
        bckg_opacity: 0.7 }
    );
}

它使用原型1.6.1和以下叠加库：http://kammerer.boo.pl/code/prototype-overlay/

基本上，当点击弹出窗口内的“关闭”链接时，弹出窗口没有关闭，我没有定义x，这是有道理的。

我尝试在x函数之外实例化emailSignUp，将其传入并返回，但这也无效。

我之前从未使用过原型，因此我正在尝试找到使hide功能正常工作的最佳方法。

在hide之后立即致电show：

function emailSignUp() {
    var x = new Overlay();
    x.show('<div class="popup"><div class="close">[ <a href="#" onclick="x.hide(); return false;">Close Window</a> ]</div></div>', {
        position: 'center',
        modal: true,
        animate: true,
        auto_hide: false,
        click_hide: false,
        opacity: 1,
        bckg_opacity: 0.7 }
    );
    x.hide();
}

没有任何问题。

非常感谢任何帮助！

-Ryan

Answer 1

只需在同一范围内创建事件监听器函数并绑定它：

function emailSignUp() {
    var x = new Overlay(),
    linkId = "link-"+(+new Date); //Gives something like "link-1319732520379"

    x.show('<div class="popup"><div class="close">[ <a href="#" id="'+linkId+'">Close Window</a> ]</div></div>', {
    position: 'center',
    modal: true,
    animate: true,
    auto_hide: false,
    click_hide: false,
    opacity: 1,
    bckg_opacity: 0.7 }
    );

    Event.observe( document.getElementById( linkId ), "click",
        function(){
        x.hide(); //x is known here
        return false;
        }
    );
}

注意：我没有使用原型，这就是我使用document.getElementById

的原因

原型叠加范围问题

1 个答案: