• RSS

[JS]SimpleModal と jQuery Cookie による認証ボックスの実装方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は KLUTCHE 様の記事を参考にさせていただきました。

18禁サイトのように、サイト訪問時に年齢確認などのアラートボックスを表示させ、「認証」ボタンを押したら次回のアクセス時からはアラートを出さないようにする、という処理のご紹介です。

jQuery プラグインのダウンロード

アラートボックスにはSimpleModal を利用し、jQuery Cookie でCookie に保存する仕組みになりますので、それぞれ必要なファイルをダウンロードしておきます。

SimpleModal のダウンロード

以下のページから SimpleModal のファイルをダウンロードします。


jQuery Cookie のダウンロード

jQuery Cookie のファイルはこちらからダウンロードします。


SimpleModal と jQuery Cookie の設置

jquery ファイルと一緒に jquery.cookie.jsjquery.simplemodal.1.4.2.min.js のファイルを設置します。

以下 Javascript とHTML、CSS の記述例の紹介になりますが、こちら↓にデモサイトを用意していますので、参考にしながら確認いただければと思います。
年齢認証アラートボックスのサンプル


Javascript の記述例

まずはjavascript の記述ですが、 KLUTCHE 様のブログ記事で紹介されているコードを記述します。

アラートボックスの設定や、Cookie の削除に関する処理を行っています。


HTML の記述例

続いてHTML ファイルでは、アラートボックス内のタイトルやテキスト、ボタンなどを用意しておきます。



CSS の記述例(アラートボックスのデザイン)

アラートボックス(#modal 要素)は display:none で非表示にしておきますが、その他のデザイン部分はサイトに合わせてカスタマイズしてみてください。



年齢認証アラートのサンプル

以下にサンプルを用意しました。

初回アクセス時にアラートボックスを表示しますが、「Yes」ボタンをクリックするとページをリロード(次回アクセス時)してもアラートは表示されません。
年齢認証アラートボックスのサンプル




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください