WEBデザインテクニック|KLUTCHE

【jQuery】モーダルウィンドウによる年齢認証の作り方

以前紹介したCookieを使って、モーダルウィンドウの年齢認証を作成する方法の改良版です。

改良点

Javascript がぐっと短くなりました。
CSS によるレイアウト変更が容易になりました。

必要な機能をしぼって、軽量かつ汎用的にしてみました。

まずはデモ

デモページ

五木川ダムの渋い魅力はアダルトな感じがするので、年齢認証を設置してみました。
モーダルウインドウは、シックに単色背景透明で作ってみましたが、見た目はCSSで自由に変更できます。

必要なもの

Javascript を3つ使います。

jQuery
jquery.cookie.js
modalConfirm.js

jQueryはGoogleライブラリから直接読み込みましょう。
のこり2つのファイルはアップロードしてヘッダ内で読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/modalConfirm.js"></script>

HTML

クラス名が “modal” の要素をモーダルウインドウとして表示します。
HTMLの最後にモーダルとして表示させる部分を書き込みます。

<div class="modal">

<p>このサイトは成人向けの情報を含みますので、<br>
18歳未満の方の閲覧を固くお断りいたします。</p>

<a class="close_modal">ENTER</a>
<a href="http://www.google.co.jp/">LEAVE</a><br>

</div><!-- /modal -->

モーダルを解除するボタンには、クラス名 “close_modal” をつけます。

テストとしてモーダルを再表示させるボタンを設置する場合は、

<a class="remove_cookie">クッキー削除</a>

“remove_cookie” というクラス名の要素を設置します。
クリックするとモーダルウインドウが復活します。

CSS

このへんはお好みで。
“modal” に display:none; を設定しておくのが気をつける点です。

.modal { position:fixed; display:none; z-index:9999; top:40%; left:50%; width:400px; height:200px; margin:-120px 0 0 -220px; padding:20px; text-align:center; }
.modal p { margin-bottom:10px; }
.modal a { cursor:pointer; }

設定

一度認証を通過した後は、Cookie 制御で一定時間はモーダルを再表示しないようになっています。
再表示までの時間や、モーダル化するクラス名は、modalConfirm.js 内で設定可能です。

	var modal = $(".modal");//モーダルウインドウのクラス
	var opacity = 0.9;//モーダル背景の透明度
	var button = $(".close_modal");//モーダル解除ボタンのクラス
	var limit = 120;//Cookieの有効期限(分)

最後にもう一度アダルトなダムを

デモページ

先程年齢認証を通過した状態であればモーダルウインドウは表示されないはずです。

“【jQuery】モーダルウィンドウによる年齢認証の作り方” への13件のフィードバック

  1. […] デモページはこちら 参考サイト:【jQuery】モーダルウィンドウによる年齢認証の作り方 | KLUTCHE […]

  2. まさ より:

    jQuery v1.10.2では動かないようなので、動くようにしていただけると幸いです。

    • KLUTCHE より:

      オホウと思いjQueryのバージョンを1.10.2に上げてみたのですが、デモサイトでは動作するようです。
      http://klutche.github.io/modalConfirm/
      ブラウザ等の環境条件があるのでしょうか、もし動作しない条件がわかれば教えて頂けると助かります。

  3. pirori より:

    ワードプレスを使用しているのですが、
    どうすればいいのかが分かりません。
    よろしかったら教えて頂けませんか?

  4. […] avascriptを公開されていた為お借りしました。 有難うございます! 【jQuery】モーダルウィンドウによる年齢認証の作り方 基本的なものはコピペでバッチリ表示出来ました。 意外とコピ […]

  5. […] avascriptを公開されていた為お借りしました。 有難うございます! 【jQuery】モーダルウィンドウによる年齢認証の作り方 基本的なものはコピペでバッチリ表示出来ました。 意外とコピ […]

  6. F より:

    検索で辿り着きました。初めての実装で焦って調べていたところ、こちらのおかげで何とかなりそうで、すごく助かりました。有難く、参考に使わせていただきます!

  7. AI より:

    お世話になります。こちらのスクリプト使わせて頂いて初回訪問者には固定の画像を表示し、二回目以降は表示しないという形で組み込んだのですが、機能自体は動いているのですが、クッキーを手動で削除しなくても、時間を何時間か置いて新しくブラウザを立ち上げてアクセスすると、最初と同じように初回表示用の画像が表示されてしまいます。
    これは、時間が経つと初期設定に戻ってしまうということなのでしょうか?
    スクリプトは初心者なので、大変申し訳ないのですが、ご回答宜しくお願い致します。

  8. よし より:

    年齢認証の情報を確認中に発見しました。
    また、年齢認証の情報ありがとう御座います。

    もし、ご存知なら教えて頂きたく書き込みします。

    年齢認証の確認後、ENTER を選択した場合は、Cookieが有効状態のため
    再度、同じ画面を確認すると、クッキー削除 画面が表示しますが、クッキー削除画面 以外に違う画面に移動させる場合はどのようにすれば良いでしょうか?

    ENTER

    とした場合に、Cookieが有効の状態の場合は、次回より
    自動的に hogehoge に飛ばす方法をご存知なら教えて
    頂きたくお願い致します。

    宜しくお願い致します。

  9. […] 【jQuery】モーダルウィンドウによる年齢認証の作り方 […]

  10. yuu より:

    EC-CUBEで使用したいと思いますが、どうやったら良いかご教授ください

  11. mima より:

    こちらのおかげで無事に設置することが出来たのですが、
    サイトに訪れた時、モーダルウィンドウを表示するまでに3秒位開けることは出来ませんか?

    サイトを訪れた瞬間に開く設定ですと、
    TwitterでURL載せた時にサイト画像が載らなくなってしまいました。
    拒否している状態になってしまって、SEO的にも困っています。

    どうかご教授お願い致します。

  12. あいざわ より:

    簡単に実装でき、コードも短く便利です!ありがとうございます。ダムの写真も素晴らしいですね

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です