如何使用jquery在鼠標上正確顯示彈出窗口

正如您在我的示例中看到的那樣，彈出窗口顯示在邊緣。如何檢查邊緣，從而顯示右側的彈出窗口。如何使用jquery在鼠標上正確顯示彈出窗口

The popup displays at the end of the screen

又如此。這個顯示在底部彈出。我希望它能夠顯示完整的彈出窗口。

enter image description here

您可以查看這裏www.mydubaitrip.com/restaurants.aspx實際演示

我的代碼是這樣的

$(".thumbsUpNav").live("mouseenter", function(e) { 
    var id = $(this).children("span").attr("id"); 
    var pURL = $('#txtTopLevelNode').val() + 'WhyBookList.aspx?id='; 
    pID = "#whyBookReviewRating" + id; 
    $(".whyBookReviewRating").css({"display":"none"}); 
    //$(this).children('.arrow_pop_up').css({top: $(this).offset().top + "px"}); 

    if (id != "") { 
     $(pID).empty(); 
     if (($(pID).length == 0) || ($(pID).length == 1)) { 

      $.ajax({ 
       contentType: 'application/json; charset=utf-8',  
       type: 'GET', 
       url : pURL + id.substring(1, 6) + '&type=' + id.substring(0,1), 
       success : function (data) { 
        $(pID).append(data); 
       } 
      }); 
     } 
     pos = $(this).offset();  
     var width = $(this).children("span").width();  

     $(pID).css({ 
      left: (width) + 'px' 
     }); 
     $(pID).stop().css({"display":"block"}); 
    } 
    else if (id == "") { 
     $(".whyBookReviewRating").css({"display":"none"}); 
    } 
}); 

$(".thumbsUpNav").live("mouseleave", function() { 
    var id = $(this).attr("rel"); 
    pID = "#whyBookReviewRating" + id; 
    $(".whyBookReviewRating").css({"display":"none"}); 
});

來源

2013-09-26 Sherry Ann Hernandez

我添加了一個codepen，可以幫助你。它用於顯示工具提示並考慮元素在屏幕上的位置以及頁面滾動的等等......它可能對您有用，並且應該很容易針對您的需求進行調整 - http：// codepen.io/lukeocom/pen/Dewdo – lukeocom

有一個在右側沒有足夠的空間在www.mydubaitrip.com/restaurants.aspx頁面

手圖標位於頁面的最右端，如果添加任何有水平滾動滾動將出現！爲什麼你想讓盒子出現在那隻手的右側而圖標沒有足夠的空間？

來源

2013-09-28 14:59:24 Drupalist

如何使用jquery在鼠標上正確顯示彈出窗口

回答

相關問題