Question

我正在使用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'
});

当我点击标识为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！'停止点击它。错误。并且模态也不会被激活。

我需要做些什么才能让它发挥作用？！

Answer 1

我解决了你在下面做的事情：

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;
}

我尝试使用'click'代替'modal'，但是当我这样做时它只是多次触发而且我不明白为什么。

从Javascript函数中打开QTip2模态窗口

1 个答案: