Как избежать прокрутки страницы при использовании qtip?

Question

Я большой поклонник qTip, но мне было интересно, есть ли способ использовать модальное окно без прокрутки вашей страницы до верха.

Посмотрел вокруг, но пока ничего не нашел. Это возможно?

Answer 1

Да, это возможно! Вам необходимо установить поле настройки

adjust : {
    screen : true
}

, где вы указываете положение всплывающей подсказки

position : {
    my : 'right center',
    at : 'left center',
    adjust : {
        screen : true
    }
}

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

Answer 2

Вы должны установить целевую точку подсказки в качестве окна, как в демонстрационной части диалога qTip :

 position: {
      my: 'center',
      at: 'center',
      target: $(window)
 }

Вы также можете по желанию применить фиксированное позиционирование к кончику с помощью CSS, чтобы полностью исключить прокрутку модального диалога. qTip автоматически учитывает все проблемы браузера с фиксированным позиционированием (кашель IE кашель). Например:

 .ui-tooltip {
      position: fixed;
 }

Или, если у вас есть собственные имена классов:

 .ui-tooltip-myClassName {
      position: fixed;
 }

Что касается другого предоставленного ответа, обратите внимание, что qTip2 имеет другой формат для настройки области просмотра (он больше не position.adjust.screen, как это было в qTip1) и, в частности, позволяет определить, какой содержащий элемент должен использоваться регулировка:

position: {
      viewport: $(window)
}

Или для содержащего элемента вместо окна / экрана:

position: {
      viewport: $('#myElement')
}

Теперь вы также можете определить способ регулировки с помощью параметра «method» и ограничить его настройкой только по одной оси, указав «none» для другой. Используемый по умолчанию / унаследованный метод - это «перевернуть», но вы также можете указать «смещение», при котором наконечник перемещается только настолько, чтобы поместиться в окне просмотра. Формат:

position: {
      viewport: $(window),
      adjust: {
           method: '<method>'
      }
}

Или,

position: {
      viewport: $(window),
      adjust: {
           method: '<horizontalMethod> <verticalMethod>'
      }
}

Например:

position: {
      viewport: $(window),
      adjust: {
           method: 'shift'
      }
}


position: {
      viewport: $(window),
      adjust: {
           // Only adjust tip position on the horizontal axis
           method: 'shift none'
      }
}