Изменение позиции всплывающих окон Bootstrap на основе позиции X поповера относительно края окна?

Я исследовал Интернет повсюду, и в то время как я нашел эту статью о потоке стека проницательной Можно ли изменить положение всплывающих окон Bootstrap в зависимости от ширины экрана? , он все еще не ответил на мой вопрос, вероятно из-за проблем с пониманием положение /смещение.

Вот что я пытаюсь сделать. Я хочу, чтобы позиция всплывающего окна Twitter-загрузчика была ПРАВИЛЬНОЙ, если только всплывающее окно горячей точки не будет расположено за пределами области просмотра, а затем я хочу, чтобы оно располагалось слева. Я создаю веб-приложение для iPad, в котором есть горячие точки. Когда вы нажимаете на точку доступа, появляется информация, но я не хочу, чтобы она появлялась за пределами области просмотра, когда горизонтальная прокрутка заблокирована.

Я думаю, что это будет примерно так:

$('.infopoint').popover({
        trigger:'hover',
        animation: false,
        placement: wheretoplace 
    });
    function wheretoplace(){
        var myLeft = $(this).offset.left;

        if (myLeft<500) return 'left';
        return 'right';
    }

Мысли? Спасибо!

77 голосов | спросил j0e 31 MarpmSat, 31 Mar 2012 18:55:34 +04002012-03-31T18:55:34+04:0006 2012, 18:55:34

10 ответов


0

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

Это позволяет очень легко копировать то, что вы делали, без начальной функции $. каждой :

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);
ответил bchhun 30 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSun, 30 Sep 2012 00:22:47 +0400 2012, 00:22:47
0

На основании документации вы сможете использовать auto в сочетании с предпочтительным размещением, например. auto left

http://getbootstrap.com/javascript/#popovers : «Когда« auto »означает указан, он будет динамически переориентировать всплывающее окно. Например, если для размещения выбрано «автоматически влево», всплывающая подсказка будет отображаться слева, когда это возможно, в противном случае она будет отображаться справа. "

Я пытался сделать то же самое, а затем понял, что эта функциональность уже существует.

ответил Hamish Rouse 7 42013vEurope/Moscow11bEurope/MoscowThu, 07 Nov 2013 07:05:20 +0400 2013, 07:05:20
0

Для Bootstrap 3 есть

placement: 'auto right'

что проще. По умолчанию это будет правильно, но если элемент расположен в правой части экрана, всплывающее окно останется слева. Так и должно быть:

$('.infopoint').popover({
   trigger:'hover',
   animation: false,
   placement: 'auto right'
});
ответил Hans Tiono 8 AMpWed, 08 Apr 2015 11:54:43 +030054Wednesday 2015, 11:54:43
0

Итак, я нашел способ сделать это эффективно. Для моего конкретного проекта я создаю веб-сайт для iPad, поэтому я точно знал, каким будет значение X /Y в пикселях, чтобы достичь края экрана. Ваши значения thisX и thisY будут разными.

Так как всплывающие окна в любом случае размещаются встроенным стилем, я просто выбираю левое и верхнее значения для каждой ссылки, чтобы решить, в каком направлении должен быть поповер. Это делается путем добавления html5-значений данных, которые .popover () использует при выполнении.

if ($('.infopoint').length>0){
    $('.infopoint').each(function(){
        var thisX = $(this).css('left').replace('px','');
        var thisY = $(this).css('top').replace('px','');
        if (thisX > 515)
            $(this).attr('data-placement','left');
        if (thisX < 515)
            $(this).attr('data-placement','right');
        if (thisY > 480)
            $(this).attr('data-placement','top');
        if (thisY < 110)
            $(this).attr('data-placement','bottom');
    });
    $('.infopoint').popover({
        trigger:'hover',
        animation: false,
        html: true
    });
}

Любые комментарии /улучшения приветствуются, но это выполнится, если вы захотите ввести значения вручную.

ответил j0e 9 PMpMon, 09 Apr 2012 19:31:31 +040031Monday 2012, 19:31:31
0

Ответ bchhun привел меня на правильный путь, но я хотел проверить фактическое пространство, доступное между источником и краем области просмотра. Я также хотел относиться к атрибуту размещения данных как к предпочтению с соответствующими запасными вариантами, если не было достаточно места. Таким образом, «право» всегда будет идти правильно, если не будет достаточно места, например, для показа поповера с правой стороны. Это был способ, которым я справился с этим. Это работает для меня, но кажется немного громоздким. Если у кого-то есть идеи относительно более чистого и более краткого решения, мне было бы интересно его увидеть.

var options = {
  placement: function (context, source) {
    var $win, $source, winWidth, popoverWidth, popoverHeight, offset, toRight, toLeft, placement, scrollTop;

    $win = $(window);
    $source = $(source);
    placement = $source.attr('data-placement');
    popoverWidth = 400;
    popoverHeight = 110;
    offset = $source.offset();

    // Check for horizontal positioning and try to use it.
    if (placement.match(/^right|left$/)) {
      winWidth = $win.width();
      toRight = winWidth - offset.left - source.offsetWidth;
      toLeft = offset.left;

      if (placement === 'left') {
        if (toLeft > popoverWidth) {
          return 'left';
        }
        else if (toRight > popoverWidth) {
          return 'right';
        }
      }
      else {
        if (toRight > popoverWidth) {
          return 'right';
        }
        else if (toLeft > popoverWidth) {
          return 'left';
        }
      }
    }

    // Handle vertical positioning.
    scrollTop = $win.scrollTop();
    if (placement === 'bottom') {
      if (($win.height() + scrollTop) - (offset.top + source.offsetHeight) > popoverHeight) {
        return 'bottom';
      }
      return 'top';
    }
    else {
      if (offset.top - scrollTop > popoverHeight) {
        return 'top';
      }
      return 'bottom';
    }
  },
  trigger: 'click'
};
$('.infopoint').popover(options);
ответил chasingmaxwell 28 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSun, 28 Sep 2014 09:22:48 +0400 2014, 09:22:48
0

Вы также можете попробовать это,

== > Получить цель /исходную позицию в окне просмотра
== > Проверьте, меньше ли места снизу, чем высота всплывающей подсказки
== > Если расстояние снизу меньше высоты всплывающей подсказки, просто прокрутите страницу вверх

placement: function(context, source){
  //get target/source position in viewport
  var bounds = $(source)[0].getBoundingClientRect();
      winHeight = $(window).height();

  //check wheather space from bottom is less that your tooltip height
  var rBottom = winHeight - bounds.bottom;

  //Consider 180 == your Tooltip height
  //if space from bottom is less that your tooltip height, this will scrolls page up
  //We are keeping tooltip position is fixed(at bottom)

  if (rBottom < 180){
    $('html, body').animate({ scrollTop: $(document).scrollTop()+180 }, 'slow');
  }

  return "bottom";
}
ответил Mohan Dere 25 FebruaryEurope/MoscowbThu, 25 Feb 2016 19:49:55 +0300000000pmThu, 25 Feb 2016 19:49:55 +030016 2016, 19:49:55
0

Вы можете использовать auto для размещения данных, например data -place = "auto left". Он будет автоматически подстраиваться под ваш размер экрана, и размещение по умолчанию останется.

ответил Abhishek Anand 15 J0000006Europe/Moscow 2015, 12:20:20
0

В дополнение к отличному ответу bchhun, если вы хотите абсолютное позиционирование, вы можете сделать это

var options = {
    placement: function (context, source) {
         setTimeout(function () {
               $(context).css('top',(source.getBoundingClientRect().top+ 500) + 'px')
         },0)
         return "top";
    },
    trigger: "click"
};
$(".infopoint").popover(options);
ответил apple16 12 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 12 Sep 2015 20:39:24 +0300 2015, 20:39:24
0

Я решил свою проблему в AngularJS следующим образом:

var configPopOver = {
        animation: 500,
        container: 'body',
        placement: function (context, source) {
                    var elBounding = source.getBoundingClientRect();
                    var pageWidth = angular.element('body')[0].clientWidth
                    var pageHeith = angular.element('body')[0].clientHeith

                    if (elBounding.left > (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
                        return "left";
                    }

                    if (elBounding.left < (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
                        return "right";
                    }

                    if (elBounding.top < 110){
                        return "bottom";
                    }

                    return "top";
                },
        html: true
    };

Эта функция делает положение всплывающего окна Bootstrap в лучшем положении, основываясь на положении элемента.

ответил Gustavo Benício 2 FebruaryEurope/MoscowbTue, 02 Feb 2016 17:38:34 +0300000000pmTue, 02 Feb 2016 17:38:34 +030016 2016, 17:38:34
0

Вы также можете попробовать это, если вам это нужно почти во всех местах на странице.

Вы можете настроить его в общем виде, а затем просто использовать его.

Таким образом, вы также можете использовать элемент HTML и все, что вам захочется:)

 $(document).ready(function()
                  {
  var options =
      {
        placement: function (context, source)
        {
          var position = $(source).position();
          var content_width = 515;  //Can be found from a JS function for more dynamic output
          var content_height = 110;  //Can be found from a JS function for more dynamic output

          if (position.left > content_width)
          {
            return "left";
          }

          if (position.left < content_width)
          {
            return "right";
          }

          if (position.top < content_height)
          {
            return "bottom";
          }

          return "top";
        }
        , trigger: "hover"
        , animation: "true"
        , html:"true"
      };
  $('[data-toggle="popover"]').popover(options);
});
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
	<h3>Popover Example</h3>
	<a id="try_ppover" href="#" data-toggle="popover" title="Popover HTML Header" data-content="<div class='jumbotron'>Some HTML content inside the popover</div>">Toggle popover</a>
</div>

Добавление


  

Чтобы настроить дополнительные параметры, вы можете перейти здесь . .

     

Еще больше можно найти здесь .

Update


Если вам нужно всплывающее окно после щелчка, вы можете изменить параметр JS на trigger: "click" следующим образом -

        return ..;
    }
    ......
    , trigger: "click"
    ......
};

U также может настроить его в HTML, добавив data-trigger="click" вот так -

<a id="try_ppover" href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="<div class='jumbotron'>Some content inside the popover</div>">Toggle popover</a>

Я думаю, что это будет более ориентированный код, более пригодный для повторного использования и более полезный для всех :).

ответил Abrar Jahin 6 MaramSun, 06 Mar 2016 08:03:24 +03002016-03-06T08:03:24+03:0008 2016, 08:03:24

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132