0

jQuery Bubble Popup v 2.3.1 http://www.vegabit.com/jquery_bubble_popup_v2/を使用しています

選択可能なtrueを持つ2つの隣接する要素でこれを使用しているときに問題が発生しています。マウスを 1 つに重ねて、バブルの上にマウスを移動すると、マウスがバブルの後ろにある他の要素に到達すると、最初のバブルの上に 2 番目のバブルが表示されます。一度に 2 つのバブルが表示されることを意味します。

バブルが表示されている場合にのみバブルを表示したい (表示されているバブルの背面ではない) と、一度に 1 つのバブルの上にマウスを置きます。助けてください！

4

1 に答える 1

0

隣接する要素に別のポップアップを表示するという同じ問題に直面しました。以下は、私が自分でマウスイベントを管理したコードです。このスクリプトがお役に立てば幸いです。

<script type="text/javascript">
    jQuery(document).ready(function() { 
            var MouseOverOnBubble = false;          
            jQuery('.ClassName').CreateBubblePopup({                                
                themeName: 'all-azure',
                themePath: 'jquerybubblepopup-theme',
                manageMouseEvents: false
              });           
              jQuery('.ClassName').mouseover(function(){                        
                        var button = jQuery(this);
                        var info = "something";
                        var generatedId = button.GetBubblePopupID();
                        if(!button.IsBubblePopupOpen())
                        {               
                            jQuery.get('getData.php?data='+info, function(data) {
                                var seconds_to_wait = 1;
                                function pause(){
                                    var timer = setTimeout(function(){
                                        seconds_to_wait--;
                                        if(seconds_to_wait > 0){
                                            pause();
                                        }else{
                                            button.SetBubblePopupInnerHtml(data, true); //false -> it shows new innerHtml but doesn't save it, then the script is forced to load everytime the innerHtml...                                             
                                            button.ShowBubblePopup();//Its freezes bubble until .UnfreezeBubblePopup(),.ShowBubblePopup() or .HideBubblePopup() are called.                             
                                            jQuery('#'+generatedId).mouseover(function(){MouseOverOnBubble = true;jQuery('#'+generatedId).css('display','block');});    
                                            jQuery('#'+generatedId).mouseout(function(){MouseOverOnBubble = false;jQuery('#'+generatedId).css('display','none');});
                                        };
                                    },1000);
                                };pause();                          
                            }); 
                        }
                        else
                        {
                            jQuery('#'+generatedId).css('display','block');
                        }

                }); //end mouseover event   
            jQuery('.ClassName').mouseout(function(){
                var button = jQuery(this);                              
                var seconds_to_wait = 1;
                function pause(){
                    var timer = setTimeout(function(){
                        seconds_to_wait--;                  
                        if(seconds_to_wait > 0){
                            pause();
                        }else{
                            if(!MouseOverOnBubble){button.HideBubblePopup();}
                        };
                    },1000);
                };pause();              
            });
    });
</script>

$ .ajaxを使用して、バブルポップアップのプリロード画像を設定するためにbeforeSendを設定できる場所からajaxリクエストを生成することもできます。

于 2011-09-06T15:21:24.380 に答える