Question

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

问题在于，通过这种方式，最左侧/最右侧框的“弹出”div会越过屏幕，触发滚动条;或者如果我不允许溢出，他们就会被切断。

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

我无法做到服务器端，因为服务器不知道哪个盒子最右边/最左边 - 这取决于窗口大小，那里有多少列。我的第一个想法是在页面加载后立即使用javascript更改所有弹出窗口的定位，但我不知道如何a）找出哪些弹出窗口会突出框架;甚至b）找出弹出窗口的大小，因为它们被正常隐藏，这意味着宽度=高度= 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上，则弹出窗口对于该帧是绝对的。然后，您可以将左/上/右/下设置为偏离帧的边缘。

我希望这有助于：）

Answer 2

最后，这就是我所做的。

我用css + jquery脚本替换了弹出窗口，该脚本将内容框扩展为大于/高于普通网格;将“弹出窗口”置于原始盒子的位置，如果它越过两侧，则调整位置。作为奖励，该功能适用于我使用'expands''expand_show''expansion_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>

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

Answer 3

根据我的理解，你有多个小div，它们都有缩略图，你有一个div来为每个图像播放大量内容。因此，对于每个图像，有两个div。

为什么你每个div.ome有困难，为什么会离开，有些在中心，有些在右边。

而不是使用公共div来显示所有较小div的大内容。在悬停时传递参数，并使用服务器端代码显示该div中的内容。

这意味着你的风格很好，你只需使用

将一个div放在中心位置

左：100px的顶部：100px的

您可以根据需要进行修改。将大量内容放在所有较小div的单个div中

使用Firefox Firebug更好地理解位置

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

3 个答案: