FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

jQuery

【簡単!】ページのアクセス時にモーダル(フロート)を表示するjQuery.layerBoard.js

投稿日:2013年1月2日 更新日:

「セール情報」や「重要なお知らせ」を、
モーダル(フロート)で目立たせたいという要望があったので、
ページのアクセス時にモーダル(フロート)を表示するjQueryプラグインを制作しました。

SPONSORED LINK

jquery.layerBoard.js」は商用利用・改変・再配布可能です。

デモ

トップページのアクセス時にモーダルを表示させるプラグイン。
ダウンロード:layerboard.zip【111KB】

デモをみる

アクセスするとモーダルがひらきます。

次にアクセスしても指定した時間までひらきません。

デフォルトでは1分で、再びひらくようになっています。
再びひらくまでの時間は分単位で指定できます。

必要なファイル

必要なのは

jQueryjquery.cookie.jsはサイトからダウンロードしてください。

jquery.layerBoard.jsは下記からダウンロードしてください。
ダウンロード:layerboard.zip【111KB】

ソース

<head>内に記述しています。
レイヤーの背景色等を変更したい場合は「layerBoard.css」を変更してください。

HTMLは上記の通りです。

id名の「id=”layer_board_area”」は変更可能です。
変更した場合は、下記<script>内のid名を変更してください。

「class=”layer_board_bg”」「class=”layer_board”」「class=”btn_close”」のclass名は変更不可です。

「class=”layer_board_btn”」は、クリックすると指定時間に関係なくモーダルをひらくことができるボタンです。
「class=”layer_board_btn”」のclass名は変更不可です。

オプション

オプションの「limitMin」で、再び表示するまでの時間を設定できます。

オプション 内容 デフォルト値
delayTime 表示までの待ち時間 200
fadeTime 表示のフェード時間 500
alpha レイヤーの透明度 0.5
limitMin 何分経過後に再度表示するか 1
easing イージング linear
limitCookie cookie保存期間 1日

オプション追加例

PR

PR

-jQuery

執筆者:


  1. つぐみ より:

    こんにちは!
    小さなベンチャーでWEBディレクターをしている者です。

    非常に便利なプラグインを無料で使わせて頂いており、
    大変感謝しております…!

    このモーダルのお陰で、実際に販促効果もでており、
    当社の販促では欠かせない存在になっています。
    本当に有難うございます!

    その上で…1点だけ質問させて下さい。
    (すみません!)

    ■ やりたいこと
     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    この度、モーダルの表示内容を
    新しいものに差し替える事になりました。

    そこで、早く多くの人に見てもらうために
    以下のような事を行いたいと思っています。

    ————————————————-
    ・差し替え以降の初回アクセス時:
    →残っているcookieに関わらず、
     全員に「差し替え後の内容」を必ず表示

    ・それ以降のアクセス:
    →limitMinで設定した時間が経過したら、表示
    ————————————————-

    つまり、旧内容のcookieを無視して、
    新しい内容をすぐに表示させたいと思っています。

    ■ 考えている方法
     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    素人考えですが。。。

    「jquery.layerBoard.js」内のcookie名を新しいものに書き換えれば、
    上記の事が可能なのかな?と思いました。
    (例:layerBoardTime→layerBoardTime0521 など)

    しかし、他にもっと良い方法があるかもしれない、
    と思い、ご相談させて頂きました。

    —-

    お忙しいところ申し訳ありません!

    お手すきの時にでも、お気付きの点などあれば、
    アドバイス頂けますと幸いです。

    どうぞ宜しくお願い致します。

    • KIYOTA より:

      つぐみ様
      ご利用ありがとうございます!お役にたててうれしいです!

      >「jquery.layerBoard.js」内のcookie名を新しいものに書き換えれば、
      >上記の事が可能なのかな?と思いました。
      >(例:layerBoardTime→layerBoardTime0521 など)

      ご指摘の通りcookie名を変更するのが、一番手っ取り早いと思います。
      うまくいかないようでしたら、またお知らせください

  2. つぐみ より:

    早々のご返信ありがとうございました!
    大変助かりました…!

    早速、上記の方法で試してみたいと思います。
    本当に便利なプラグインを提供して頂き、
    どうも有難うございます。

  3. yuki より:

    はじめまして。
    WEBデザイナーをしておりますyukiといいます。

    お客さまから
    「トップページアクセス時に告知を表示させたい」という
    ご要望があり、こちらにたどり着きました。
    使いやすいプラグインをありがとうございます。
    JavaScript初心者の自分でも設置できて感激でした!

    すみません・・もし、方法がありましたら教えていただきたいのですが、
    CLOSEボタンや背景をクリックせずに、
    時間指定でモーダルウインドウを自動的に閉じる方法はあるのでしょうか。

    どうぞよろしくお願いいたします。

    • KIYOTA より:

      ありがとうございます。
      ざっくりですが、setTimeoutを使えば、指定秒数で自動的に閉じます。
      3000=3秒後に閉じるには以下の感じです。

      $(‘#layer_board_area’).layerBoard({alpha:0.5});

      // 3秒後に自動的に閉じる
      setTimeout(function(){
      $(‘#layer_board_area .layer_board ,#layer_board_area .layer_board_bg’).fadeOut(200);
      },3000);

      })

      参考になればと思います。

  4. yuki より:

    早々に返信いただきをありがとうございました。
    無事に設置できました!

    今後も愛読せさていただきます!

  5. masa より:

    こちらのブラグインを利用させていただいております。
    とても使いやすく助かっております。

    さて、本来の趣旨とは異なるのですが
    アクセスした際にはモーダルを開かず、

    もう一度開く
    だけを使用することは可能なのでしょうか?

    お手すきのときにでもお教えいただけますと
    幸いです。よろしくお願いします。

  6. DICO より:

    便利なプラグイン大変便利に使わせていただいております!
    ありがとうございます。

    その上で、次にこのサイトをご覧になる方のために、
    私が悩んだところを記載させていただきます。

    「limitMin」の指定なのですが、
    ローカルにファイルを置き、確認すると、
    指定した通りに動作してくれませんでした。

    今思えば、サーバーがもっている時間をCookieが記録・参照しているのだろうから、当然か…と思ってますが、ローカルで確認される方はお気をつけ下さい。
    この考えで行くと、「limitCookie」もローカルじゃ指定した通りに動作しませんね。

  7. 橋本 より:

    はじめまして。広告の掲載目的に使用させていただいております。
    どうしても上手くいかないことがありましたので、質問させていただきます。
    現状、スマートフォンで閲覧される事が多いので、縦サイズ1500px前後の画像を用意して表示させておりますが、PCでの閲覧や、解像度の低いデバイスで表示させた際に、ハミ出てしまっています。
    cssにてmax-heightなどを指定してみたものの、上手くいきません。
    ウィンドウ内で表示させる画像をレスポンシブで拡大縮小する手法についてご教授お願いいたします。

  8. ponnkiti より:

    こちらのモーダルを使わせて頂いておりますが、なぜかcloseボタンを押した後に正常に縦スクロールが出来なくて困っております。
    ウインドウは出てくるので動作はしているんでが、いかんせんサイトの縦スクロールが出来ないので下の方を閲覧できなく、画面が固定されてしまっています。
    見える範囲内でのバナーやボタン等は普通に反応するので不可解です。

  9. 松永まり より:

    自作ホームページを作っている完全素人です。
    突然、申し訳ございません。
    トップページにこちらのjsを利用したモーダルを使っていたのですが、どうもページが重たく、他のプラグインも含めてjquery3.2.1に対応させたホームページに換装させようとしているのですがこのモーダルだけがうまく使えないのです…
    何か良い対策はございますか?
    初歩的な質問だとしたら申し訳ございません!

  10. しん より:

    はじめまして。こちらを参考に初めてモーダルを作ってみました。
    おかげさまで画像のモーダルはなんとか作成することができました。
    ここで質問なのですが、この画像をyoutubeにある動画に変更するにはどのようにしたらいいのでしょうか?
    ぜひ教えていただけませんでしょうか?
    よろしくお願いします。

comment

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

関連記事

jQuery

jQueryでスクロールするとヘッダーを固定させる

最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモ …

【新人向け】簡単にできた!Webサイトでよくみる技術のまとめ

4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者で …

デザイナーでもJavaScriptやjQueryが必ず上達する3つのコツ

いまやJavascriptを使わないサイトはほぼないと思います。 WEBデザイナーもJavascript、せめてjQueryは使えないと 厳しい時代です。 JavaScriptやjQueryは時間をか …

jQuery

jQueryのaddClassで複数のclassを追加する方法

下記のようにスペースで区切れば、複数指定できます。

簡単ですが、使う機会もなかったので知りませんでした。。。

写真をタイル状に並べてくれるjQuery「jMosaic」

jMosaic 写真の高さなどを自動的にリサイズしてタイル状に並べてくれるjQuery「jMosaic」です。

PR




人気の記事

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。