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

问题描述：

我是qTip的忠实粉丝，但我想知道是否有方法使用模式窗口，而不会让页面滚动到顶部。如何在使用qtip时避免页面滚动？

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

答

是的，这是可能的！您需要设置的调整领域

adjust : { 
    screen : true 
}

其中指定提示

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

的我不知道的位置，如果这是qTip1的功能，但我在qtip2用英寸工具提示自动调整，以避免溢出和滚动

谢谢你的问题，其实我去了Facebox（另一个jQuery的模态窗口插件）。这简单得多，但为我做了诀窍。谢谢回复！ – 2011-04-29 17:48:14

好的，但是我的答案解决了这个问题，所以你应该接受它。 – 2011-04-29 20:56:09

对于StackOverflow社区来说，重要的是您将回答标记为已回答，这有助于人们寻找正确的答案，并帮助回答问题的人获得尊重。 – zachzurn 2012-07-05 23:52:30

答

，则应该设置前端的目标是窗口作为qTip dialog demo：

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

您也可以任选地应用固定定位到尖端通过CSS来防止模式对话框的滚动。 qTip自动适应所有浏览器固定定位问题（咳嗽IE咳嗽）。例如：

.ui-tooltip { 
     position: fixed; 
}

或者，如果你有自己的类名：

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

在关于提供对方的回答，请注意qTip2对视调整为不同的格式（它不再是位置.adjust.screen因为它是在qTip1）和具体地允许定义应使用含有元素什么调整：

position: { 
     viewport: $(window) 
}

或者，含元素代替窗口/ s的creen：

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

您现在还可以定义调整如何制备与“方法”参数，并且可以限制为只通过指定其他“无”在单个轴线调整。默认/传统方法是“翻转”，但您也可以指定“移动”，它只移动提示以适应视口。格式为：

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

感谢您的支持。它帮助了很多。 – Keith 2013-02-01 20:41:55

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

相关推荐