0

我正在使用 Qtip2 使用以下代码创建模式窗口：

$('a#my-link-id').qtip({
    content: {
        text: $('#my-modal-content'),
        title: "My Modal Window Title",
        button: true
    },
    position: {
        my: 'center',
        at: 'center',
        target: $(window)
    },
    show: {
        event: 'click',
        solo: true,
        modal: {
            on: true
        }
    },
    hide: {
        event: false
    },
    style: 'qtip-modal qtip-shadow'
});

当我单击带有 id 的链接时，将激活此模式my-link-id。

但是，我想使用OnClick链接中的功能激活此模式。所以说我有以下链接：

<a id="my-link-id" href="#" onClick="javascript:getModalWindow('my-link-id');return false;">Fire Modal</a>

我有以下功能：

window.getModalWindow = function(link_id)
{
    var elem_link = $('a#'+link_id);
    elem_link.qtip({
        content: {
            text: 'my content',
            title: 'My Modal Window Title',
            button: true
        },
        position: {
            my: 'center',
            at: 'center',
            target: $(window)
        },
        show: {
            event: 'click',
            solo: true,
            modal: {
                on: true
            }
        },
        hide: {
            event: false
        },
        style: 'qtip-modal qtip-shadow'
    }).on('click', function(e){
        e.preventDefault();
        return false;
    });

    elem_link.trigger('click');
    return false;
}

上面的代码不像我预期的那样工作。发生的情况是点击被连续触发（不是一次），直到我的浏览器（Chrome）用“Aw，Snap！”停止它。错误。而且模态也没有被激活。

我需要做什么才能让它工作？！

4

1 回答 1

0

我通过以下方式解决了这个问题：

window._getModalWindow = function(link_id)
{
    var elem_link = $('a#'+link_id);
    var modal_init_bool = elem_link.data('modal_init');
    switch(true)
    {
        case (modal_init_bool !== true):
            elem_link.qtip({
                content: {
                    text: 'Modal Window Content',
                    title: 'Modal Window Title',
                    button: true
                },
                position: {
                    my: 'center',
                    at: 'center',
                    target: $(window)
                },
                show: {
                    event: 'modal',
                    solo: true,
                    modal: {
                        on: true
                    }
                },
                hide: {
                    event: false
                },
                style: 'qtip-modal qtip-shadow'
            });
            elem_link.data('modal_init', true);

            break;  
    }

    elem_link.trigger('modal');
    return false;
}

我尝试使用“点击”而不是“模态”，但是当我这样做时它只是不断触发多次，我真的不明白为什么。

于 2013-09-06T19:23:19.033 回答