javascript - 弹出窗口放置取决于可用空间。

Question

请看一下附图。

如您所见，我正在显示一个弹出窗口。基本上我想根据可用空间（左或右）更改弹出框的位置。现在它在图像之外。

它是一个花哨的盒子（iframe）

使用此代码显示弹出框。

  // Position and show the message.
        this.message
            .css({
                left: (tPosition.left + "px"),
                top: ((tPosition.top + t.outerHeight()) + "px")
            })
            .show();

Answer 1

我会做这样的事情：

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 + 弹出高度不大于父容器高度。