【问题标题】:Multiple buttons with an overlay attached, can't find open overlay多个带有叠加层的按钮,找不到打开的叠加层
【发布时间】:2012-10-31 13:02:14
【问题描述】:

我正在尝试使用 jQuery 工具覆盖,当有一组静态按钮启动覆盖时,它的效果非常好。

但是,当重新创建链接到叠加层的按钮时,叠加层似乎变得孤立,我不明白为什么。我无法关闭它,我什至无法通过使用 each() 遍历 DOM 找到对它的引用。

我见过一些涉及触发点击的解决方案,但一方面这似乎是一个不雅的解决方案,另一方面它会导致覆盖在我尝试关闭之前闪烁。我想了解这不起作用的原因,以及一个好的解决方案,有人可以帮忙吗?

HTML

<div id="container">

</div>
<button class='modalLaunch' rel='#modal'>
    Uncontained launch button
</button>
<div id="modal">
    Modal
    <button id="rebuildContainer">Rebuild container</button>
</div>

​ Javascript

$(document).ready(function() {
    $("#modal").hide();

    var rebuildContainer = function() {
        $("#container").html("<button class='modalLaunch' rel='#modal'>Contained launch button 1</button><br><button class='modalLaunch' rel='#modal'>Contained launch button 2</button>");           

        var triggers = $(".modalLaunch").overlay({
            mask: {
                color: '#bbbbee',
                loadSpeed: 200,
                opacity: 0.9
            },
            closeOnClick: true,
            load: false
        });
    }

    $("#rebuildContainer").click(function() {
        console.log("rebuilding buttons inside the container div");

        $(".modalLaunch").each(function() {

            var o = $(this).overlay();
            if (o) {
                console.log("there is an overlay associated with this button");
                if (o.isOpened()) {
                    // I would expect this to be true once each time the handler is called
                    console.log("the overlay associated with this button is open");
                }
            }
        });

        $(".modalLaunch").overlay().close();
        rebuildContainer();
    });

    rebuildContainer();
});

http://jsfiddle.net/EveryoneMustWin/hjJtc/

感谢您的帮助!

【问题讨论】:

    标签: jquery overlay jquery-tools


    【解决方案1】:

    自从提出这个问题后,我已经阅读了这个问题jQuery Tools Alternatives? 并决定最好放弃 jQuery 工具。他们网站上的论坛甚至不允许您创建新主题!

    【讨论】:

      猜你喜欢
      • 2010-11-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多