Question

我是qTip的忠实粉丝，但我想知道是否有办法使用模态窗口而不会让页面滚动到顶部。

环顾四周但还没找到任何东西。这可能吗？

Answer 1

是的，这是可能的！您需要设置调整字段

adjust : {
    screen : true
}

您指定工具提示的位置

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

我不确定这是否是qTip1的功能，但我在qtip2中使用过。工具提示是自动调整以避免溢出和滚动

Answer 2

您应该将提示的目标设置为qTip dialog demo中的窗口：

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

现在，您还可以使用“方法”参数定义调整的方式，并且可以通过为另一个轴指定“无”来限制它仅在单个轴上进行调整。默认/遗留方法是'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'
      }
}

使用qtip时如何避免页面滚动？

2 个答案: