Question

我是jQuery的新手，我在创建模态窗口时遇到了问题。我的模态窗口显示在蒙版下面。我希望它显示在面具的顶部。我无法弄清楚这个问题所以需要一些帮助。这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modal Windows</title>
<style type='text/css'>
#overlay {
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
}
#modal {
    position: auto;
    display: none;
    margin-left: auto;
    margin-right: auto;
    color: #F00;
    z-index: 100;
}
</style>
<script type='text/javascript' src='../javascript/jquery.js'></script> 

<script type="text/javascript">
$(document).ready(function () {
        $("#click").click(function() {
            $('#overlay').css({ 'display' : 'block', opacity : 0});
            $('#overlay').fadeTo(500,0.8);
            $('#modal').show();
        });
});
</script>

</head>

<body>
<a href="#" id="click">Click me</a>
<div id="modal">This is modal</div>
<div id="overlay">
</div>

</body>
</html>

Answer 1

这不是你的jQuery的问题，这是你的CSS的问题。您将模态设置为position:auto，这意味着它是静态定位的（静态是默认值）并且不受z-index的影响。只需将定位更改为其他任何内容即可。（相对的，绝对的或固定的）

示例：http://jsbin.com/unifum

定位是HTML和CSS的支柱，您应该了解更多信息（特别是绝对定位，一旦您知道如何正确使用它就可以成为非常有用的工具）

jQuery模态窗口显示在掩码下

1 个答案: