Динамически изменять положение всплывающего окна

У меня есть 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'
      });
    }
  });

Извините, я не очень хорошо представляю. Пожалуйста, поделитесь скрипкой

Core972 11.04.2018 13:59

Привет, я добавил jfiddle в вопрос, но почему-то всплывающее окно теперь не появляется

Blue482 11.04.2018 15:49
1
2
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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'
  }); 

Обновленный Fiddle V2

Исходная скрипка не работала, потому что вы забыли добавить jQuery.

Редактировать: По высоте тоже.

Большое спасибо @ Core972! Как вы предлагаете динамически регулировать высоту всплывающего окна? Когда текст внизу статьи выделен, окно все равно должно отображаться в статье. Я попробовал $(window).height(), но не понял ..

Blue482 11.04.2018 16:42

Также спасибо за указание на отсутствие jQuery. Я добавил его сейчас в jsfiddle в вопросе. В настоящее время, если я выделяю текст в конце первой статьи, всплывающее окно блокирует просмотр второй статьи.

Blue482 11.04.2018 16:45

Другие вопросы по теме