画像掲示板のレスアンカーポップアップ機能を修正

「画像掲示板の泉」にはjQueryを使ったレスアンカーポップアップ機能をスレッドにつけてあります。

レスアンカーとは、2chなどで「>>10」といった形で、他の投稿にリンクを張る、このリンクのことをいいます。「画像掲示板の泉」では、レスアンカーを設定すると、jQueryを使ってその投稿をポップアップ表示するように作りこんでありました。

この記事では、このレスアンカーポップの作り方を、具体的なHTML、jQueryのサンプルコードを付けてご紹介しています。

レスアンカーポップ

8年ほど前、jQueryを使って掲示板のレスでアンカーリンクがあった際にポップアップさせる機能を付けたという記事を書いておりました。

表示されなくなったレスのポップアップ

頑張って作った機能でしたが、何故だか理由は分かりませんが、全板からこの機能がなくなってしまっていたので再度設定をしたという話になります。

いつ、何のために消したかを全く覚えていませんが、jQueryのfunction()だけでなく、表示用の空DIVまで消えていたので、何か意図があって自分できれいに消していたのかもしれません。とはいえ、その理由も全く覚えておりません。

仕方ないので、上記の数年前のブログ記事を読みつつ、自分でまた１からコードを書くところから作り直してみました。

レスアンカーポップの作り方

空DIVの設置

jQueryでデータを流し込むことになる、ポップアップ表示用の空DIVをHTML側に設置しておきます。idセレクタ名は何でも構いません。

<div id="POPUPnoMOTO"></div>

aタグにパラメータを追加

次に、投稿にアンカーリンクがあった際、jQueryでポップアップをさせやすくするために、アンカーリンクの<a>タグに要素を二つほど追加しておきます。

• mouseoverの対象と分かるような固有のクラス名
• アンカーリンクで指定された先のidセレクタ名

投稿記事からレスを抽出するPHP

掲示板の記事投稿用PHPでは、投稿された本文から「＜＜数字」という文字列要素を探して、このアンカーリンクを見つけたら、上の二つのクラス名、セレクタ名を追加しつつ<a>タグ</a>を生成させるコードを入れます。

$memo = preg_replace('/>>([0-9]+)/','<a href="#\\1" class="onMouse" name="d\\1">\\0</a>',$memo);

それぞれの投稿を固有IDのDIVで囲う

返信されることになる投稿側でも、ポップアップされた空のDIVにデータを渡しやすいよう、投稿内容を固有のDIV#idでまとめておきます。画像掲示板の泉では”d”+数字としてありますが、お好きなセレクタ名で設定ください。

<div id="d1">
 <ul class="list-inline post-meta">
  <li><a name="1"></a><span>1</span></li>
  <li>2019/10/01</li>
  <li>某訪問者</li>
 </ul><!-- end post-meta -->
 <p>投稿されたコメント本文</p>
</div><!-- end div -->

.JSの記述

これでHTML側の仕込みは全てできたので、あとはjQueryのみとなります。

”onMouse”というClassセレクタ名の<a>タグにmouseover()をすると、nameに設定した読み込み先のidセレクタ名データを取り込み、これを最初に作っておいた空のDIV要素に流し込むといった感じのコードになります。

言葉で説明がわかりにくいので、コードを見た方がすっきるするかもしれません。

$(function(){
  $("#POPUPnoMOTO").css({
    opacity:"0.9",
    position:"absolute",
    display:"none"
  });
  $("a.onMouse").mouseover(function(){
    var popupID = $(this).attr("name");
    $("#POPUPnoMOTO").html($("#" + popupID).clone());
    $("#POPUPnoMOTO").fadeIn("fast");
  }).mouseout(function(){
    $("#POPUPnoMOTO").fadeOut("fast");
  }).mousemove(function(e){
    $("#POPUPnoMOTO").css({
      "top":e.pageY+3+"px",
      "left":e.pageX+7+"px"
    });
  });
});

おわりに

数年前仕上げた時のように、多少のフェードイン・フェードアウトのオマケをjQueryで付けて、表示位置を少々調整すれば、レスアンカーポップアップの完成です。

今回はポップアップさせる空のDIV要素の側#POPUPnoMOTOに、CSSで吹き出し風のデザインも付けておきました。分かりづらいとは思いますが。

スマホで見ても無事ポップアップが出ておりました。