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

Question

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

问题是，以这种方式，最左边/最右边框的“弹出”div 会越过屏幕，触发滚动条；或者如果我不允许溢出，它们将被切断。

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

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

也许显示这些弹出窗口的完全不同的方法比重新定位我当前拥有的 div 更容易？

目前其他一些页面使用的是Prototype/scriptaculous，服务端是ruby on rails。

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

Answer 1

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

我希望这对您有所帮助:)