javascript - 动态改变弹出窗口的位置

Question

我有一个 div 的 buttons 当你点击一篇文章时它会出现。但是我很难在我的文章 div 中限制这个弹出窗口，因为目前如果你点击文章的边缘 -> 弹出按钮没有像你想象的那样正确显示。

JSfiddle 链接:https://jsfiddle.net/kpfax14n/35/

  $('.tweets_pane').mouseup(function(event) {
    console.log("Mouse up");
    if (!getRightClick(event) ){
      console.log("Show buttons");
      $('.entity_types').css({
        display: 'block',
        position: 'absolute',
        left: (event.pageX+10) + 'px',
        top: (event.pageY+15) + 'px'
      });
    }
  });

Answer 1

您需要将 window.width 与您的 div 宽度进行比较

var left_value = event.pageX+10,
    window_width = $(window).width();
console.log('left_value = ' +left_value + ' | '+ 'window_width = '+ window_width);
    if ((left_value + 290) > window_width){ // 280 = 250px (width) + 6px (borders) + 24px (padding) + 10 (for extreme)
    left_value = window_width - 320;
  }
  $('.entity_types').css({
    display: 'block',
    position: 'absolute',
    left: left_value + 'px',
    top: (event.pageY+15) + 'px'
  }); 

Updated Fiddle V2

原来的 fiddle 不工作是因为你忘了添加 jQuery

编辑:高度也是如此。