メインコンテンツを出す前に全面オーバーラップを表示する

何を言っているの！？

えーと、よくあるウザい全面広告なんかを表示する際に、 メインコンテンツを一切出力しないで全面広告を表示する（かつスクロールバーなどは出さない）方法はどうしているのかな？という話です。

検証

↓このページに遷移するとダミーの全面広告がでます。Closeするとメインコンテンツが表示されます。

検証ページへ

結果

全面オーバーラップが表示されてからメインコンテンツが表示された。

window.onLoad的なタイミングじゃないので、メインコンテンツがチラッと表示されることもないし、 メインコンテンツがながーーくても縦のスクロールバーが出たりしない状態だった。

どうやってんの？

bodyタグの直下に下記の splash_ad.php を読むようにしています。

<script type="text/javascript" src="splash_ad.php"></script>

splash_ad.phpでは、

• CSS(splash_style.css)のdocument.write()での出力
• 全面に表示するHTMLのdocument.write()での出力
• 10秒後に自動的に閉じるとかのJavaScriptコードの出力

メインコンテンツを消すのはどうなってんの？

メインコンテンツの親ノードとして div#container で囲ってますが、splash_ad.php が出力するCSSには #container{ display:none; } が書いてあります。これで消えてます。

「クリックで閉じる」をクリックした時とか、10秒経ったタイミングで、hideSplash()が呼ばれる。
この関数では、$("#container").show(); して表示しているだけ。同関数で全面広告も hide(); させてるだけ。

シンプルやな＼(^o^)／

つか、なんで splash_ad.php がJS吐いてるの？

PHPでなんやかんや処理（ログインとかCookieいじるとか）してから広告だす方が応用できると思って。

ソースダウンロード

GitHubからどうぞ。
splash_adのサンプル