1

我正在开发一个允许在 Jquery Mobile 中弹出面板的插件。

面板将如下所示：

<div data-role="panel" data-panel="popover" data-id="my_name">
    // JQM pages
</div>

并在 JQM 页面的内容部分之后。

样品（越野车）在这里：样品

弹出窗口示例

面板的行为类似于视口或页面容器。JQM 默认只使用body作为 pageContainer。我的插件还允许面板，因此您可以将弹出框集成到正常导航中。

我的问题：
我在弹出窗口中添加了三角形，但我需要保持面板CSS overflow-x: hidden从而隐藏三角形。如果我注释掉溢出：隐藏，三角形是可见的，但是当我更改页面时，面板会“溢出”，如下所示：

三角形可见，但面板流血

由于内容部分确定滚动条，我尝试改组溢出：隐藏，也将其设置在弹出框内的页面上，但没有任何效果。我不想将三角形​​移到面板之外，所以：

问题：
有没有办法用 overflow:hidden 显示父元素之外的子元素，或者为什么设置 overflow-x:hidden 隐藏我的三角形，它位于顶部/底部（y 多于 x）？

只是寻找一些想法或其他解决方法。

感谢帮助！

编辑： 这是三角形 CSS：

.popover_triangle { 
    position: absolute;
    line-height: 0%; 
    width: 0px; border-top: 16px solid rgba(0,0,0,0); 
    border-left: 16px solid rgba(0,0,0,0); 
    border-right: 16px solid rgba(0,0,0,0); 
    border-bottom: 16px solid black;  
    }
.ui-triangle-top .popover_triangle { 
    top: -32px;
    }
.ui-triangle-bottom .popover_triangle { 
    bottom: -34px;
    }

弹出框有：

.ui-popover { 
    position:  absolute; 
    z-index:1005 !important; 
    border: 3px solid black;  
    border-radius: 4px; 
    left: auto; 
    }
.popover1 { 
    margin-top: 3.25em; 
    right: 5em;  
    height:25em; 
    width: 15em; 
    top: 0;
    }
4

1 回答 1

1

不，使用overflow-x: hidden，你不能让那个三角形以绝对定位从弹出窗口中伸出来......我已经在各种浏览器上试过了！

您需要做的是在弹出框内创建另一个 div，然后应用并溢出-y：滚动或自动到该 div。（我假设您可能指的是overflow-y 而不是overflow-x，因为滚动条是垂直的？）将正常的溢出留给您的popover 元素。要让 div 内部的 overflow-y: auto 正常工作，您需要给它一个高度，例如 height: 100%。（如果您无法指定像素数量并且 100% 不会为弹出框中的其他元素腾出空间，则还有其他方法可以解决此问题）

例如：

<div data-role="panel" data-panel="popover" data-id="my_name">
    // JQM pages
    <!-- insert extra DIV here that contains content and hidden overflow -->
</div>
于 2012-06-20T02:43:12.257 回答