0

我想制作一个主体重叠透明背景的 jquery 警报框，但它不起作用，有人可以帮助我吗？

$("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',
});
4

2 回答 2

0

嗨，您需要设置position:fixed为重叠 div。还要设置width:100%' you have doubleheight` 声明。

并且rgba()具有 alpha 通道，1因此对其进行更改0.2以使其具有不透明度。

于 2013-11-01T19:01:15.040 回答
0

我想改变如下：

<!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-01T19:17:58.310 回答