1

いくつかのボタンを含む div を表示したいのですが、最初にサイトが読み込まれたときに、その div がそのボタンの 1 つで閉じられるまでサイトを使用できないようにしたいと考えています (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

高い z-index で絶対配置されたフローティング div を作成する必要があります。このフローティング 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 に答える