8年ほど前、jQueryを使って掲示板のレスでアンカーリンクがあった際にポップアップさせる機能を付けたという記事を書いていましたが、いつの間にかこの機能がなくなっていたので再度設定をしたという話になります。

いつ、何のために消したかも全く覚えていませんが、jQueryのfunction()だけでなく、表示用の空DIVまで消えていたので、何か意図があって私がきれいに消したのだとは思います。。。

消した理由も全く覚えておりませんので、数年前の記事を読みつつ、また1から設定を作り直してみました。

まずは、jQueryでデータを流し込むことになる、ポップアップ表示用の空DIVから作り直しをスタートです。idセレクタ名は何でも構いません。

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

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

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

掲示板投稿PHP側に、投稿から「<<数字」という文字列要素を探して、アンカーリンクを見つけたら、上の二つを追加しつつ<a>タグ</a>を生成させるコードを入れます。

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

一方、返信された投稿側にも、ポップアップされた空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 -->

これで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で吹き出し風のデザインも付けておきました。分かりづらいとは思いますが。。

アンカーリンクをさわるとポップアップでリンク先を表示します

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

スポンサーリンク