请看附件图片。
如您所见,我正在显示一个弹出框。基本上我想根据可用空间(左侧或右侧)更改弹出窗口的位置。现在它超出了图像。
它是一个花式框(iframe)
使用此代码显示弹出窗口。
// Position and show the message.
this.message
.css({
left: (tPosition.left + "px"),
top: ((tPosition.top + t.outerHeight()) + "px")
})
.show();
我会做这样的事情:
this.message
.css({
left : function () {
if ( tPosition.left + $(this).width() >= $(this).parent().width() ) {
return $(this).parent().width() - $(this).width();
}
else {
return tposition.left;
}
},
top : function () {
if ( tPosition.top + $(this).height() > $(this).parent().height() ) {
return $(this).parent().height() - $(this).height();
}
else {
return tposition.top;
}
}
});
基本上,在显示弹出窗口并对其进行适当调整之前,您需要检查弹出窗口是否会超出包含框的边界。在水平轴上,这就像确保鼠标位置 x + 弹出窗口的宽度不大于父容器的宽度一样简单。在垂直轴上,您要确保鼠标位置 y + 弹出窗口高度不大于父容器高度。
我是一名优秀的程序员,十分优秀!