Superfish jQuery工具提示弹出div允许下面的事件

时间:2012-06-15 16:23:31

标签: javascript jquery popup superfish

当你将鼠标悬停在列表中的某个项目时,我正在使用Superfish弹出工具提示,这会突然发挥作用,但是当鼠标滚过基础列表项时,弹出式div允许其下方的其他项目触发弹出窗口。

换句话说,虽然弹出LOOKS不透明,但它不像一个不透明的div,因为它允许下面的项目在弹出消失之前仍然触发事件。

我将z-index设置为9999以确保div的位置高于其他所有位置,但它不像固体/不透明div那样。

我错过了什么?设置不透明度是否会影响视觉不透明度?

这是在鼠标悬停时调用气泡弹出窗口的jQuery函数:

function Popup(){

    //create a bubble popup for each DOM element with class attribute as "text", "button" or "link" and LI, P, IMG elements.
    $('.text, .button, .link').CreateBubblePopup({
        selectable: true,
        position : 'top',
        align    : 'center',
        innerHtml: '<img src="/images/loading.gif" alt="Loading" style="border:0px; vertical-align:middle; margin-right:10px; display:inline-block;" /><span>loading!</span>',
        innerHtmlStyle: {
                            //color:'#FFFFFF', 
                            'text-align':'left',
                            'z-index':'9999',
                            'width':'500px'
                        },                          
        themeName:  'blue', //'all-black',
        themePath:  '/jquerybubblepopup-theme'
    });

    // add a mouseover event for the "link" element...
    $('.link').mouseover(function(){

            //get a reference object for "this" target element
            var link = $(this);

            //load data asynchronously when mouse is over...
            $.ajax({
                    url: '/bodytext.php?id=' + this.id,
                    type: 'GET',
                    cache: false,
                    success: function(data) {
                        var seconds_to_wait = 0;
                        function pause(){
                            var timer = setTimeout(function(){
                                seconds_to_wait--;
                                if(seconds_to_wait > 0){
                                    pause();
                                }else{

                                    //set new innerHtml for the Bubble Popup
                                    link.SetBubblePopupInnerHtml(data, false); //false -> it shows new innerHtml but doesn't save it, then the script is forced to load everytime the innerHtml... 

                                    // take a look in documentation for SetBubblePopupInnerHtml() method
                                    //$('.link').SetBubblePopupOptions(selectable, true);

                                };
                            },500);
                        };pause();
                    }
                });

    }); //end mouseover event

}

0 个答案:

没有答案