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與身體內容重疊

回答

相關問題