1

我想显示一个带有一些按钮的 div，第一次加载我的网站时，我希望该网站变得不可用，直到该 div 用它的一个按钮关闭（比如当你在 image.google.com 中选择一个图像，然后你查看所选图片及其从其后面提取的站点，但该站点有点暗，就像该站点的照片）

我希望我能问我的意思，如果句子结构有误，我真的很抱歉，因为英语是我的第二语言

4

3 回答 3

1 
<div id="overlay">
  <div id="dialog">
    Close me to see anything else
  </div>
</div>

#overlay{
position:fixed;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.3);
}
#dialog{
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
left:50%;
top:50%;
position:absolute;
background-color:#ffffff;
border:1px solid #666;
padding:20px;
}

http://jsfiddle.net/MqVMr/

这是一个更新的小提琴：http: //jsfiddle.net/MqVMr/1/

全屏http://jsfiddle.net/MqVMr/1/show/

于 2012-09-01T08:02:32.633 回答
0

您需要创建一个浮动 div，该 div 绝对定位于高 z-index。在这个浮动 div 元素的正下方，应该有一个元素与 body 元素 clientWidth 的宽度和 body 元素 clientHeight 的高度相匹配，您可以将其称为屏幕。给屏幕一个不透明度为 25% 的黑色背景。屏幕将拦截所有点击，因为它位于页面的其余部分之上，除了位于其上方的模式。

于 2012-09-01T08:03:09.263 回答
0

试试这个代码... 

<html>
<head>
    <script type="text/Javascript">
        function loading()
        {
            var sss = document.getElementById('back');
            sss.style.opacity="0.20";
            return true;
        }
    </script>
    <style type="text/css">
    #set {
        width:350px;
        height:350px;
        margin: 0 auto;
        background:#ccc;
        color:#000;
    }
    </style>
</head>
<body>
<div id="back">
    <div id="set">
            <h1>This div you have to view.</h1>
        <input type="button" onclick="loading();" value="Button"/>
    </div>
</div>
</body>

你也可以用jquery来做这个......一切顺利......

于 2012-09-01T08:17:02.243 回答