我正在尝试创建一个覆盖框并希望整个背景都被遮盖。
但是,掩码仅覆盖页面主体。我希望遮罩延伸到页面的边缘和顶部。
有没有办法手动定位蒙版以覆盖整个页面?
谢谢你。
CSS:
body
{
background-color: #C75656;
text-align:center;
font-size:16px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
text-decoration: none;
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px;
}
#middleContainer {
width:780px;
margin: 5px auto;
padding: 10px 0;
}
.box {
background:white;
border-style:solid;
border-width:1.5px;
border-color:#071419;
border-radius: 12px;
-moz-border-radius: 12px;
}
.modal {
background-color:#fff;
display:none;
width:700px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>mySITE</title>
<!-- Meta tags go here -->
<!-- Links to Icon, favicon, css, jquery, ajax, etc. -->
<link rel='stylesheet' type='text/css' href='default.css' />
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.5,
},
});
$("#login form").submit(function(e) {
triggers.eq(1).overlay().close();
var input = $("input", this).val();
triggers.eq(1).html(input);
return e.preventDefault();
});
});
</script>
</head>
<body>
<span><h1>my<font color="red">SITE</font></h1></span>
<a class="modalInput" rel="#login">Login</a>
<div id="middleContainer" class="box">
<div id="title">Content</div>
</div>
<div class="modal" id="login">
<h2>Login or Regester.</h2>
<form>
<input />
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
<br />
</div>
</body>
</html>