Question

以下是我尝试做的事情 - 我正在编写通用叠加功能，该功能将用于所有具有特定类别的链接。它很简单，你有这样一个链接：

<a class="modalInput" rel="#prompt">Local load</a>

当你点击它时，javascript就开始了：

        $(".modalInput").live("click",function()
    {
        var obj = null;
        obj = $(this);
        var container = null;
        if (!(typeof obj.attr("container") === 'undefined'))
        {
            container = obj.attr("container");
        }
        else
        {               
            if (typeof obj.attr("container") === 'undefined')
            {
                container = obj.attr("rel");

                if (container == '#norel')
                {
                    container = randomString();
                    $("#footer").append("<div id='"+container+"' class='gru_curtain_simple_overlay'></div>");                   
                    obj.attr("container", container);
                }
                else
                {
                    container = container.substring(1, container.length);
                }
            }
        }

        test_test(container, obj);
    });

该函数获取该链接的各种参数并决定它应该做什么。然后，调用test_test（），如下所示：

    function test_test(container, obj)
{
    var triggers = jQuery("#"+container).overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#000',
            loadSpeed: 200,
            opacity: 0.9
        },
        closeOnClick: false,
        closeOnEsc: true,
        load: true,
        oneInstance: false,

        onBeforeLoad: function() {
            if ($.trim($("#"+container).html()).length < 25)
            {
                //Check if it's remote
                var remote = obj.attr("remote");                    
                if (!(typeof remote === 'undefined'))
                {
                    //$(container).load(remote);
                    $.get(remote, function(data)
                    {
                        $("#"+container).empty().append(data);
                    });
                }
            }

            //Check if dialog should have close button
            var is_closable = obj.attr("closable");
            if (is_closable)
            {
                $("a.close").hide();
            }

            var wd = parseInt(obj.attr("wd"));
            var hg = parseInt(obj.attr("hg"));

            if (!(typeof wd === 'undefined'))
            {
                $("#"+container).css("width", wd);
            }
            if (!(typeof hg === 'undefined'))
            {
                $("#"+container).animate({
                    height: hg
                }, 800, function()
                {
                    $("#"+container).css("overflow-x", "hidden");
                    $("#"+container).css("overflow-y", "visible");

                });
                //$(container).css("height", hg);
            }
        },

        onLoad: function() {            
        },

        onClose: function() {
            //Destroy current container
            //var container = obj.attr("rel");
            //$(container).empty().html('<img src="/wp-content/themes/default/images/preloader.gif" style="margin: 25% 25%; width: 120px;"/>');
        }
    });

我知道，它很大但效果很好。那么问题是什么？如果我点击链接，它会首次显示叠加层。但是当我再次点击它时，它不起作用。它没有任何错误，没有任何警告，基本上它应该工作，但事实并非如此。

我已经尝试了所有想到的东西（比如将test_test（）函数减少到它的基础），但那并没有成功。所以我没有想法，如果有人有建议，我愿意倾听。

编辑：我发现如果我有另一个这样的链接：

<a class="modalInput" rel="#norel" remote="/test?t=694749&inner=1" wd="850" hg="500">Remote load</a>

我可以根据需要点击此链接（这个创建随机div，它在页脚中附加）但是在上面的链接之后（在HTML中的某个地方有容器，所以它不生成任何东西），所有叠加都是不再显示了。

Answer 1

像安德鲁·惠特克说的那样，解决方案如图所示 jQuery Tools alert works once (but only once)

包装：从overlay params中删除“load：true”，手动调用.load（）。

多次工作：

//call the overlay
$('#idofoverlay').overlay({
//  load: true
}).load();

只工作一次：

//call the overlay
$('#idofoverlay').overlay({
  load: true
});

缺点：

与jquery-tools叠加，您将松开“关闭”项目当这样称呼时

第二次单击时不显示jQuery Tools Overlay

1 个答案: