Question

我想创建一个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',
});

Answer 1

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

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

Answer 2

我想改变下面的内容：

<!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>

div重叠身体内容

2 个答案: