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 回答