実現したいこと
ボタンを押すとメッセージ入力BOXが表示されるようになるプラグインを導入し、wordpressの投稿ページ下に設置したところ、ボタンを押したとき、pcではボックスが45度ほど傾いていて、スマホではメッセージボックスが画面外(フッターの位置よりも)かなり下にスクロールした位置に表示されてしまいます。
不慣れながら検証で該当のcssを探したところ、スマホで発生している問題は
element.style {
top: 5276.81px
left: 102.5px;
}
という部分で指定されていることが分かり、おそらく原因のjsの記述部分まで見つけることができたのですが記述の意味がさっぱり分かりません。。。記述を細切れにして検索してなんとなく画面の長さやスクロール位置を取得してそこから計算して指定位置にしているのかな…までは分かったのですが、問題の対処の仕方が分かりません。ご教授いただけないでしょうか?
該当のソースコード
js
1 // 表示位置指定 2 $msgBox = $('#mwc-message-box-' + data.post_id); 3 var $win = $(window); 4 5 if ($win.width() > 768) { 6 // PC 7 var mwcOffset = btnObj.offset(); 8 var mwcHeight = mwcObj.height(); 9 10 var mbTop = mwcOffset.top + mwcHeight + 12; 11 var mbLeft = mwcOffset.left; 12 13 // 管理バー 14 if ($('#wpadminbar')[0]) { 15 mbTop -= $('#wpadminbar').height(); 16 } 17 18 $msgBox.css({ 19 top: mbTop, 20 left: mbLeft 21 }).addClass('arrow').show(); 22 } else { 23 // タブレット 24 var mbTop = ($win.height() - $msgBox.height()) / 2 + $win.scrollTop(); 25 var mbLeft = ($win.width() - $msgBox.width()) / 2 + $win.scrollLeft(); 26 $msgBox.css({ 27 top: mbTop, 28 left: mbLeft 29 }).show(); 30 } 31 $msgBox.find('select, textarea, input[type="text"]')[0].focus(); 32 } else { 33 // 拍手IDのみ更新する 34 $('div#mwc-message-box-' + data.post_id).find('input[name="clap_id"]').val(data.clap_id); 35 } 36 }); 37 }).

あなたの回答
tips
プレビュー