0

我有一个 html 片段由后端加载到main我页面的 div 中。它包含modal单击链接时出现的一个。问题是，它modal能够被页面上的其他元素覆盖。设置z-index是没有用的，因为如果 中的元素比div 高，则header将显示在 后面，而不管它的. 我目前正在通过使用 javascript (jQuery) 来解决问题，将克隆附加到，然后删除原始z-indexmainmodalheaderz-indexclonemodalbodymodal. 这似乎是一个 hacky 解决方法，可能会导致潜在问题，有没有更好的方法来做到这一点？模态框通常是如何加载的，这样它们就不会遇到这个问题？

这是问题的一个jsfiddle：http: //jsfiddle.net/kraxF/

这是 HTML，如您所见，模态在 DOM 树中非常低，并且可能被页眉或页脚或主元素中的元素覆盖，如果它们的 z-index 高于“由后端加载” .

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="main">
        Main
        <div id="loaded-by-backend">
            <div id="modal">
                Modal
            </div>
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>
4

1 回答 1

0

如果您可以更改 CSS，只需position:relative从#main. http://jsfiddle.net/kraxF/3/

于 2013-03-19T23:08:17.470 回答