Q&A
モーダル部分のコードの追記をお願いします
現在Java,javascript(jQuery),tymeleafを使ってLINEのバナーを実装しようとしています。
質問があるのですが、
結論から言うと、
ページ上でなく、モーダルダイアログ上に「LINEで送る」バナーを設置すると初期表示時にdivタグがiframeタグに変わり、バナーが正常に表示されなくなるのはどういった原因が考えられるでしょうか？
リンク先(https://media.line.me/en/how_to_install#lineitbutton)を参考に以下のタグを設置しました。
javascript
1<div class="line-it-button" data-lang="en" data-type="share-d" data-url="https://media.line.me/en/how_to_install#lineitbutton" style="display: none;"></div> 2 <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
これをページ上に設置すると正常に表示され、バナーとして機能します。
しかしモーダルダイアログ上に設置すると、正常に表示されないのです。
正常に表示されないとは、divタグがiframeタグに変わり、座標位置がtop:0,left:0となり、おかしな位置に隠れており、見えません。
モーダル上でこのような現象が起きるので、
このモーダルのライブラリであるjsファイルが初期表示時に何か行なっているとは思うのですが、該当箇所が大きかったり、ライブラリの管理がままならなくて調べづらかったりで、どこを直せばいいか、何が影響しているのかわからずにいます。
もしこのような現象を体験したことがある、知っている、どのような対応をしたら直るなどといったアドバイスを頂ける方がいれば是非教えて頂けると助かります。よろしくお願い致します。
回答2件
0
tymeleaf（Thymeleafでしょうか）やLINEバナーを利用したことがないので不明な点もありますが、現象が発生する可能性として以下が想定されます。
・モーダルダイアログを実現しようとするライブラリ内で置き換えられている
・Thymeleafで置き換えられている
すでにコメントで記載されていることですが、問題が発生した場合、最小のコードで再現する状況を作り出すことで、どの部分に問題があり、どの部分に問題がないかを切り分けることが解決への早道だと思います。
このモーダルのライブラリであるjsファイルが初期表示時に何か行なっているとは思うのですが、該当箇所が大きかったり、ライブラリの管理がままならなくて調べづらかったりで、どこを直せばいいか、何が影響しているのかわからずにいます。
上記の記載だけで的確に問題を指摘することは困難だとご認識はされていると思いますが、貴殿が想定される問題をまずは切り分けるためにも、上記を行うことがよろしいかと。また、最小限のコードにすることで、よりエキスパートな技術者からの回答もえられやすくなると思います。
また、モーダルダイアログを実現するための方法は様々ありますので、既存のコード・ライブラリに拘らず、別の方法で試すことで、問題が解決できる可能性もあるので、その観点でもコードを整理・最小化することに意味が出てきます。
投稿2017/05/15 09:47
総合スコア5488
0
自己解決
状況の追記です。
モーダルダイアログはdivタグで生成されおり、初期表示時display:noneで表示されていない状態です。
それをモーダル呼び出しボタン押下時にjavascriptによってshow()し、表示させていました。
とくにライブラリを使うでもなく、単純にjavascriptによってのみ構成されていたように思います。
LINEのバナーが表示されないのは初期表示時にモーダルが非表示になっており、その中にいるバナーが座標をとれなかったのかもしれません。
そのため、制御としては初期表示時にモーダルを一時的に表示するなどして座標を取れるようにし、LINEバナーを本来の位置に表示するようにする必要があるかもしれません。
divタグがiframeタグに変わるところはまだ解析できていません。
投稿2017/05/15 11:41
総合スコア599
divタグがiframeタグに変わる理由は判断がつきませんでした。
他のやり方として、LINE画像を設置し、その画像をアンカータグで囲い、そこでLINEを起動するurlをhref属性に設定するという措置を取りました。
サンプルコードは以下です。
<a href="http://line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F">
<img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" />
</a>
参考:http://qiita.com/katsunory/items/4d90e24e389a587d3690
あなたの回答
tips
プレビュー
