-5

従来のナビゲーション構造とは異なるナビゲーション構造の Web サイトをセットアップしています。ユーザーが初めてサイトにアクセスしたときに読み込まれるオーバーレイをサイトの上に追加したいと考えています。

オーバーレイはフルスクリーン、黒の「不透明度 = 50」で、Web サイトの使用方法に関する簡単なテキストを追加する必要があります。クリックすると消えるはずです

私は Web デザイナーですが、コーディングに関する知識は限られています。(いくつかの css/html/php)

これにクラスを追加する簡単な方法はありますか?

フィードバックありがとう

4

3 に答える 3

2

十分に単純な HTML

<div id='overlay'>
  <div id='contents'>...
</div>

CSS:

#overlay {
  background-image : url('images/overlay.png');
  width:100%;
  height:100%;
  position: fixed;
  top: 0;
  left: 0;
}

#contents {
  width: 300px;
  height: 300px;
  margin: auto;
}

オーバーレイの画像を使用します。これは、不透明度の設定がコンテンツ領域に適用され、このタイプのコンテンツに JavaScript を使用する必要がないためです。

于 2013-09-04T13:10:12.420 に答える
1

この例に従ってください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
    z-index: 10000;
    filter: alpha(opacity=50); /*older IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
    -moz-opacity: .50; /*older Mozilla*/
    -khtml-opacity: 0.5;   /*older Safari*/
    opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
    background-color:#000000;
    position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
    var thediv=document.getElementById('displaybox');
    if(thediv.style.display == "none"){
        thediv.style.display = "";
        thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
    }else{
        thediv.style.display = "none";
        thediv.innerHTML = '';
    }
    return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>

このサイトでhttp://library.creativecow.net/articles/chaffin_abraham/full-page-overlay.php

于 2013-09-04T13:22:04.790 に答える
1

ググって！それは難しいことではありません。非常に簡単なGoogle検索で、ここにたどり着きました：

$(function() {
    var docHeight = $(document).height();
    $("body").append("<div id='overlay'></div>");
    $("#overlay").height(docHeight).css({
        'opacity' : 0.4,
        'position' : 'absolute',
        'top' : 0,
        'left' : 0,
        'background-color' : 'black',
        'width' : '100%',
        'z-index' : 5000
    });
});

任意の場所をクリックしてオーバーレイを閉じるには、次の操作を実行できます。

$('#overlay').click(function (e) {
    this.remove();
});

デモ用のjsFiddleを次に示します。

于 2013-09-04T13:05:35.087 に答える