Webデザイナーブログから学ぶホームページ制作

ホームページを開いた時やページ内アクセスした時にポップアップ表示されるエフェクトは、jQueryライブラリを使うことによって「はい」or「いいえ」を選択する画面を表示させることができます。
「モーダルウィンドウ」は、画面上にポップアップ表示で「はい」or「いいえ」が出現し背景を暗くして表現します。
ページアクセス時にポップアップ画面が出現するjQueryプラグイン「modal Plugin」の設定方法を解説します。

下記からJavaScriptライブラリのダウンロードを行ってください。
jqueryライブラリダウンロード
jquery.cookie.jsダウンロード
jquery.layerBoard.jsダウンロード

html、cssファイルを作成します。

<p><a class="remove_cookie">モーダルウィンドウもう一度表示する</a></p>

<!-- layer_board -->
<div class="modal">
<div class="pr_box">
<div class="disclaimer_inner">
<p>【モーダルウィンドウ表示】</p>
<div class="disclaimer_bt">
<p class="mg01 red">はいをクリックしてください。</p>
<p><a class="close_modal" href="javascript:;" href="/">はい</a>&nbsp;&nbsp;<a class="close_modal_no" href="http://www.kingsite.jp">いいえ</a>
</div>
</div>
</div>
</div>
<!-- //layer_board -->

div.modal {
	position: relative;
	display:none;
	z-index:9999;
}
div.modal .pr_box {
	width:500px;
	height:auto;
	margin:auto;
	box-shadow:0px 0px 12px rgba(0,0,0,0.4);
	padding:40px;
	background:#FFFFFF;
}
.pr_box img:hover {
	filter: alpha(opacity=50);
	-webkit-opacity:0.50;
	-moz-opacity:0.50;
	-ms-opacity:0.50;
	-o-opacity:0.50;
	opacity:0.50;
}
.close_modal{
	display: block;
	width: 180px;
	line-height:50px;
	display: inline-table;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	transition: all 300ms linear;
	color: #fff;
	border: 2px solid #018ad1;
	background: #018ad1;
	*display: inline;
	*zoom: 1;
}
.close_modal:hover {
	text-decoration: none;
	display: inline-table;
	color: #018ad1;
	border: 2px solid #018ad1;
	background: #fff;
}
.close_modal_no{
	display: block;
	width: 180px;
	line-height:50px;
	display: inline-table;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	transition: all 300ms linear;
	color: #fff;
	border: 2px solid #60cfff;
	background: #60cfff;
	*display: inline;
	*zoom: 1;
}
.close_modal_no:hover {
	text-decoration: none;
	display: inline-table;
	color: #018ad1;
	border: 2px solid #60cfff;
	background: #fff;
}

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

<meta charset="UTF-8">
<title>ページアクセス時にポップアップ表示で「はい」or「いいえ」を選択するjQuery「modal」の設定方法｜Webデザイナーブログ</title>
<meta name="description" content="ページアクセス時ポップアップ表示で「はい」or「いいえ」を選択する jQuery 「modal」ウィンドウのご紹介を致します。">
<meta name="keywords" content="オープニング,エフェクト,ページアクセス時,ホームページ開いた,modal,モーダルウィンドウ,はい">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/052/base.css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/sample/052/jquery.cookie.js"></script>
<script src="/sample/052/jquery.layerBoard.js"></script>

実装サンプルを作りましたのでこちらでも確認してみてください。
jQuery inview Plugin デモ

以上で設定完了となりますが、簡単に設定ができますね。
モーダルウィンドウは、広告やキャンペーンとして表示することも出来るので使い道はありますね。 ただ、むやみに使ってしまうとユーザーへのストレスになってしまう場合もありますので必要な時に使うのが良いです。モーダルウィンドウを設置するときは、なるべくブラウザキャッシュを残して、1ユーザーが一度開いたら2度目は表示しない、といった設定も忘れずに。