div与身体内容重叠

我想制作一个jQuery警告框与身体重叠透明背景，但它不工作，有人可以帮助我吗？div与身体内容重叠

$("body").css({ 

    'height'   : '100%', 
    'height'   : '100%', 
}); 

$("#alert").css({ 
    'height'   : '100%', 
    'height'   : '100%', 
    'left'    : '0px', 
    'right'   : '0px', 
    'top'    : '0px', 
    'bottom'   : '0px', 
    'z-index'   : '98', 
    'background-color' : "rgba(0,0,0,1)", 
}); 

$("#alertBox").css({ 
    'border-color'  : settings.bordercolor, 
    'border-width'  : settings.borderwidth, 
    'border-style'  : settings.borderstyle, 
     'border-radius' : settings.borderradius, 
    'background-color' : settings.backgroundcolor, 
    'color'   : settings.color, 
    'padding'   : settings.padding, 
    'width'   : '500px', 
    'position'   : 'absolute', 
    'left'    : '30%', 
    'right'   : '30%', 
    'top'    : settings.top, 
    'text-align'  : settings.align, 
    'z-index'   : '98', 
});

来源

2013-11-01 user2942734

有你设置这一切与'jquery'，而不只是'css'理由吗？ –

你的意思是模态对话框？ – j08691

'＃alertBox'需要比'＃alert'更高的'z-index'。看到你的JS和HTML也会有所帮助。 –

您好，您需要将position:fixed设置为重叠div。同时设置width:100%' you have double高度声明。

而且rgba()在1中有alpha通道，因此将其更改为0.2以使其具有不透明性。

来源

2013-11-01 19:01:15 DaniP

感谢您的提示 – user2942734

我想改变一些东西像为下：

<!DOCTYPE html> 
<html> 
<head> 
<style>html{height:100%;}</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
<script> 
$(document).ready(function(){ 
$("body").css({ 

'height'   : '100%', 
'width'   : '100%', 
}); 

$("#alert").css({ 
'width'   : '100%', 
'height'   : '100%', 
'left'    : '0px', 
'right'   : '0px', 
'top'    : '0px', 
'bottom'   : '0px', 
'z-index'   : '98', 
'background-color' : "rgba(0,0,0,0.5)", 
}); 

$("#alertBox").css({ 
'border-color'  : settings.bordercolor, 
'border-width'  : settings.borderwidth, 
'border-style'  : settings.borderstyle, 
    'border-radius' : settings.borderradius, 
'background-color' : settings.backgroundcolor, 
'color'   : settings.color, 
'padding'   : settings.padding, 
'width'   : '500px', 
'position'   : 'absolute', 
'left'    : '30%', 
'right'   : '30%', 
'top'    : settings.top, 
'text-align'  : settings.align, 
'z-index'   : '98', 
}); 
}); 
</script> 
</head> 
<body> 

<div id="alert"><div id="alertBox">AAA</div></div> 
</body> 
</html>

来源

2013-11-01 19:17:58

div与身体内容重叠

回答

相关问题