別ページに飛ばないSNSシェアボタンの設置方法について

###前提・実現したいこと
初めて質問します。最近プログラミングを勉強し始めた文系大学生です
現在、Wordpressのスマホ用テーマをHTML5でマークアップ中です。
そこで実現したいこととしては、右下（親指で操作できるあたりです）にすぐSNSなどで記事をシェアしてもらうために、SNSボタンを設置→（ボタンを）タップすると各SNSボタン（FB、ツイッター、はてぶを考えています。）が出現、（ただしここからが今一番実現したいのですが仕組みが今一つわからないところなのです）別ページに飛ぶのではなくその記事のページの上に飛び出す（つまり下の記事はぼかした状態になり、そのSNSボタンが並んでいるブロックが浮き出てくるような）仕様にしたいのですが、教えていただけますでしょうか。

ボタンについてはこちらのサイト様のをモデルに書いています。
https://hyper-text.org/archives/2012/03/css3_circle_menu.shtml

SNSのボタンのイメージとしてこちらのサイト様の拡散スタイルが理想のように思えました。
http://www.recruit.jp/meet_recruit/2016/06/og12-2.html

※デベロッパーツールなどでモバイル画面にしないとボタンは出てこないです。

拙い質問で申し訳ありませんが、ご指導ご鞭撻よろしくお願いいたします。
###発生している問題・エラーメッセージ

###該当のソースコード

<div id="menu"> <ul> <li><a href="http://bdm.change-jp.com/"><" alt="ホーム" /></a></li> <li><a href="./"><img src="" alt="検索" /></a></li> <li><a href="./"><img src="" alt="sns" /> /* ここにSNSボタンを押すと、シェアページがぼかされた記事の上に表示されるように書きたいです。それかそもそも書く場所を間違っていればご指摘いただければと思います。

        <li id="openMenu"><img src="" alt="メニューを開く" /></li>
        <li id="closeMenu">メニューを閉じる</li>
    </ul>
</div>```


###試したこと
よろしくお願いいたします。


###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答2件

jQuery の lightbox 系プラグインで、iFrame や Ajax に対応しているものを組み合わせれば実現できると思います。lightbox 系プラグインは種類が沢山あり過ぎて、どれがオススメとは言いがたいです。自身で利用してみて、一番良かったものを選んでいただくのが良いと思います。

投稿2016/06/08 13:45

退会済みユーザー

総合スコア0

KandM

2016/06/10 03:10

回答ありがとうございます！調べてみたところほんとにたくさんありますね(^_^;) こんなにもプラグインが存在することすら知らなかったので探すことすらできませんでした。。 kuck1u様がおっしゃられる通り、私がほしい機能のものをコツコツといじりながら探していきたいと思います！ありがとうございます！

行動規範の内容に同意します

ベストアンサー

ザックリとしたサンプル

質問の希望位置とはまた違いますし、デザインとかは自由に改変してもらったら良いのですが、思われているような動作をするための基本的な仕様というか、こんな感じかな？と思われるサンプルを作りました。

ただまぁ、snsのシェアボタンはそのスクリプトにもよりますが、ポップアップして内容を書くものが多いのでモーダルとかは逆に手間かなぁとは思うんですが、ポップアップさせないようにオリジナルのシェアボタンのスクリプトを改変すれば、モーダルの中にその書き込む内容を入れることもできるだろうとは思います。

今回は、単純にボタンを入れる所までやってみました。サイズや位置は思われる所に出せると思います。

タップすると各SNSボタン（FB、ツイッター、はてぶを考えています。）が出現

これはボタン自体が出現するのか、それとも書き込むウィンドウのことを言われているのかはわからなかったので、ひとまずモーダルにボタンを入れてみました。

SNSボタンが並んでいるブロックが浮き出てくるような...

と言われている所から、ボタンが浮き出れば良いととらえましたのでモーダルにしてみました。
サンプルでは、はっきりとモーダル&ボタンとわかってしまいますが、仮に、記事中に既にボタンが設置してあるとして、それが浮き出てきたようなものを想定されている場合でも、モーダルで対応できます。

方法としては、snsボタンのoffsetを調べて、幅100%のモーダルをそのボタンらの位置を囲むように少し縦幅は大きめのものを作り、モーダルの背景色をとっておきます。

ボタンのoffsetが仮にtop: 100だとして、高さが50pxなら top:125が縦中央になるので、モーダルの高さが仮に80pxにするとしてその半分の40、つまりoffset.top: (125 - 40)がモーダルのoffsetTopになると言う感じです。
そこにsnsボタンをclone()したものを挿入すれば、もちろんoffsetleftも考慮したり、あるいはセンタリングしたり色々しないとはイケないと思いますが、ボタンの同じ位置の真上にクローンしたものが浮き出てくるようにできます。
もちろんモーダルが出てきた時は、その他の要素はぼかしがはいってますから、そこだけはっきり見えているという感じです。

「クリックしたらボタン(モーダル)が出てきて、範囲外をクリックしたらモーダルが閉じ、他の要素がぼける」ひとまずここらをやってみました。

各cssのプロパティはベンダープレフィックスとか入れてないので、必要なものは入れて下さい。
scssで書いてあるので、codepenとかに移植してコンパイルされるのが楽かと思います。

投稿2016/06/08 14:52