Javascript 与正文内容重叠的div_Javascript_Jquery_Css_Html

Javascript 与正文内容重叠的div

javascript jquery css html

Javascript 与正文内容重叠的div,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我想制作一个带有主体重叠透明背景的jquery警报框，但它不起作用，有人能帮我吗 $("body").css({ 'height' : '100%', 'height' : '100%', }); $("#alert").css({ 'height' : '100%', 'height' : '100%', 'left' : '0px', '

我想制作一个带有主体重叠透明背景的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',
});

您好，您需要设置重叠div的

position:fixed

。同时设置

width:100%'您有两个height`声明
而rgba（）
在1
中有alpha通道，因此将其更改为0.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>


html{高度：100%；}
$（文档）.ready（函数（）{
$（“正文”）.css({
“高度”：“100%”，
“宽度”：“100%”，
});
$（“#警报”）.css({
“宽度”：“100%”，
“高度”：“100%”，
“左”：“0px”，
“右”：“0px”，
“顶部”：“0px”，
“底部”：“0px”，
“z指数”：“98”，
“背景色”：“rgba（0,0,0,0.5）”，
});
$（“#alertBox”）.css({
“边框颜色”：settings.bordercolor，
“边框宽度”：settings.borderwidth，
“边框样式”：settings.borderstyle，
“边界半径”：settings.borderradius，
“背景色”：settings.backgroundcolor，
“颜色”：settings.color，
“padding”：settings.padding，
“宽度”：“500px”，
'位置'：'绝对'，
“左”：30%，
“对”：30%，
“top”：settings.top，
“文本对齐”：settings.align，
“z指数”：“98”，
});
});
AAA
你为什么要用jquery
而不仅仅是css
？你是说一个模式对话框？#alertBox
需要比#alert
更高的z-index
。看到你的JS和HTML也会很有帮助。我使用JQuery是因为我想制作一个JQuery警报插件