Question

我正在尝试创建一个叠加框，并希望屏蔽整个背景。

然而，面具仅覆盖页面的主体。我希望蒙版延伸到页面的边缘和顶部。

有没有办法手动定位蒙版以覆盖整个页面？

谢谢。

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>

Answer 1

这就是我用于所有项目的内容

<style>
    .mask {
        position:fixed;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        z-index:1000;
        opacity: 0.5;
    }
    .overlay {
        position: absolute;
        width: 300px;
        height: 200px;
        top: 100px;
        left: -50%;
        margin-left: -150px;
        background: white;
        z-index: 1001
    }
</style>

<div class="mask"></div>
<div class="overlay"></div>

Answer 2

将此放在文档的头部

    <style type="text/css" media="all">
    .mask {    
        position: absolute; 
        top: 0; left: 0; 
        width: 100%; 
        height: 2000px;
        background: black;
        opacity: 0.5;
    }
    </style>

然后把

<div class="mask"></div>

你的HTML中的任何地方，但我会把它放在顶部或底部。因为它绝对定位，所以无所谓。

覆盖面罩偏离中心

2 个答案: