Javascript 如何重新定位CSS悬停弹出窗口以保持在固定框架内？

我有一个页面，在网格布局中填充了许多固定大小的框（div只是用float:left堆积起来）。将鼠标悬停在其中任何一个框上时，会显示一个“弹出窗口”-较大的div，其中包含相同的和附加的信息，就像框向所有方向展开一样（但不移动其他框，它也会显示在框上）。下面是简化的html/css。它类似于缩略图/完整图像，但实际内容是一堆各种html数据，包括链接等

问题在于，通过这种方式，最左边/最右边框的“popup”div在屏幕上移动，触发滚动条；如果我不允许溢出，它们就会被切断

相反，我想将这些弹出窗口重新定位到左/右，以便它们保持在总边界内。如何满足这一需求

我不能在服务器端执行此操作，因为服务器不知道哪些框是最右边/最左边的-这取决于窗口大小，以及可以容纳多少列。我的第一个想法是在页面加载后立即使用javascript更改所有弹出窗口的位置，但我不知道如何a）找出哪些弹出窗口会伸出框架；甚至b）找出弹出窗口的大小，因为它们通常是隐藏的，这意味着在显示之前宽度=高度=0

也许用一种完全不同的方式显示这些弹出窗口比重新定位我目前拥有的div更容易

目前Prototype/scriptaculous用于其他一些页面，服务器端是RubyonRails

<div class="frame">
  <div class="box", id="object123" >
    small, fixed size content here
    <div class="popup">
      large, variable size/width/height content here that describes object123
    </div>
  </div>
  <div class="box", id="object456" >
    small, fixed size content here
    <div class="popup">
      large, variable size/width/height content here that describes object456
    </div>
  </div>
  ... many other similar boxes.
</div>

div.frame {
  overflow: hidden;
}
div.box {
  border:1px solid #efe9dc;  
  margin:5px;
  position:relative;
  float:left;
  height:70px;
  width:150px; 
}
div.popup {
  min-width:200px;
  display:none;
  position:absolute;
  left:-30px;
  top:-30px;    
  z-index:1000;
}
div.box:hover .popup { display: block; }

小，固定大小的内容在这里
此处描述object123的大型、可变大小/宽度/高度内容
小，固定大小的内容在这里
此处描述object456的大型、可变大小/宽度/高度内容
... 许多其他类似的盒子。
副车架{
溢出：隐藏；
}
分区箱{
边框：1px实心#efe9dc；
保证金：5px；
位置：相对位置；
浮动：左；
高度：70像素；
宽度：150px；
}
分区弹出窗口{
最小宽度：200px；
显示：无；
位置：绝对位置；
左：-30px；
顶部：-30px；
z指数：1000；
}
div.box:hover.popup{display:block；}

据我所知，您有多个小div保存缩略图，并且您有一个div为每个图像播送大内容。 因此，每个图像都有两个div

这是为什么你在每个分区都有困难。一些在左边，一些在中间，一些在右边

相反，使用公共div为所有较小的div显示较大的内容。 在hover上传递一个参数，并使用服务器端代码显示该div中的内容

这意味着你的风格是好的，你只需在中心位置使用一个div

左：100px 顶部：100px

您可以根据需要修改它。对于所有较小的div，将较大的内容放在单个div中

---

使用Firefox Firebug更好地理解位置

现在，您的div.popup被绝对定位到div.box；如果从div.box中删除该位置并将其放在div.frame上，则弹出窗口将是该帧的绝对位置。然后，可以将左/上/右/下设置为从帧的边偏移

---

我希望这有帮助：）

最后我就是这么做的

我用css+jquery脚本替换了弹出窗口，该脚本将内容框扩展到比正常网格更大/更高的位置；将“弹出窗口”居中放置在原始框的位置上，如果它越过侧面，则调整位置。 作为奖励，该功能适用于我标记为“expands”“expand\u show”“expand\u hide”类的所有内容，因此不会重复，因为它应用于多个位置

示例html

<div class="box_grid expands">
    <div class="box_content">
       basic content that's always visible
       <p class="expand_hide>short content summary shown in the small boxes</p>
       <p class="expand_show> detailed content</p>
       <div class="expand_show> detailed extra content</div>
    </div>
</div>

始终可见的基本内容
详细内容
您的建议意味着弹出窗口始终显示在屏幕的中心，而不是特定框的上方，这是您的意图。这样就不可能单击弹出窗口中的任何链接，因为只需将鼠标移到屏幕中间，您可能会将鼠标悬停在其他一些框上，并获得不同的弹出窗口。所需的布局将是，对于所有“中间”框，弹出窗口从原来的较小框均匀分布到各个方向；对于右侧框，弹出窗口与边框右对齐，对于左侧框，弹出窗口左对齐。Ok！。然后我没有看到任何其他的方式，除了使用左，中，右分开的风格。或者根据参数按addclass、removeclass或addcss应用不同的样式。这些是来自jquery的名称，原型可能会有所不同，在这种情况下，需要以某种方式计算与帧边缘的偏移量，以将弹出框放置在原始框上，而据我所知，这无法用CSS完成，所以需要使用javascript。
div.box_grid {
  margin:5px;
  float:left;
  height:80px;
  width:170px;
}
div.expanded { position:relative; }
div.expanded > * { 
  position:absolute;
  width:auto;
  height:auto;
  z-index:1000;
  min-width:100%;
  min-height:100%;  
}
div.expands .expand_show { display:none; }
div.expanded .expand_show { display: block; }
div.expanded .expand_hide { display: none; }

$(document).ready(function(){
      $('.expands').hover(
        function(){ 
          grid = $(this);
          expanded = grid.children();
          border = $('.content_borders');

          grid.addClass('expanded');          
          var top = (grid.outerHeight() - expanded.outerHeight())/2;
          var left = (grid.outerWidth() - expanded.outerWidth())/2;            

          var left_limit = border.offset().left + 5 - grid.offset().left;
          var right_limit = border.offset().left + border.outerWidth() - expanded.outerWidth() - 5 - grid.offset().left;
          var bottom_limit = border.offset().top + border.outerHeight() - expanded.outerHeight() - 5 - grid.offset().top;

          if (left < left_limit) { left = left_limit }
          if (left > right_limit) { left = right_limit }
          if (top > bottom_limit) { top = bottom_limit }

          expanded.css('top',top);
          expanded.css('left',left);
        },
        function(){ $(this).removeClass('expanded') }          
      );
    });