あなたのキモチ つなげるカタチ

TOP > JavaScript > 【JavaScript】thisを使用した簡単なバルーンメッセージ

【JavaScript】thisを使用した簡単なバルーンメッセージ

スポンサーリンク

実装内容

ちょっとした、バルーンメッセージが必要な時にthisを使用したサンプルを用意しました。複数のバルーンメッセージを設置する必要がある時に便利かもしれません。jQueryの記述量も少ないので、是非ご活用ください。

実装方法

実装に必要なスクリプトはたったのこれだけです。

$(function(){
    $(".list li a").on('click', function() {
        $(this).children().fadeIn();
        $(".bk-balloon").fadeIn();
      })
    $(".bk-balloon").on('click', function() {
        $(".balloon,.bk-balloon").fadeOut();
    });
  });

1.バルーンを出したいテキストをクリックすると、バルーンがフェードイン
2.同時にバルーンの背面へ透明な背景が画面一杯にフェードイン
3.背景をクリックすとバルーンと背景がフェードアウト
という簡単な仕組みです。

スポンサーリンク

コメントを残す

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