使用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具有不同的视口调整格式(它不再是位于qTip1中的position.adjust.screen),并且特别允许您定义应该用于调整的包含元素:

position: {
      viewport: $(window)
}

或者,对于包含元素而不是窗口/屏幕:

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

您现在还可以使用"方法"参数定义调整的方式,并且可以通过为另一个指定"无"来限制它仅在单个轴上进行调整.默认/遗留方法是'flip',但您也可以指定'shift',它只会移动尖端以适合视口.格式为:

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'
      }
}