2021.12.15|JavaScript

ページアクセス時にポップアップ表示で「はい」or「いいえ」を選択するjQuery「modal」の設定方法

ページアクセス時にポップアップ表示で「はい」or「いいえ」を選択するjQuery「modal」の設定方法

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

ページアクセス時にポップアップ画面が出現する設定方法

1.jQueryライブラリをダウンロード

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

2.html、cssファイルを作成

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

htmlファイルに記述
<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 -->
cssファイルに記述
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;
}

3.htmlファイル内に記述

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

htmlファイルに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度目は表示しない、といった設定も忘れずに。