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 に答える