実現したいこと
参考サイトをダウンロードし、まるっとコピーしようとしております。
参考サイト
その中で、ポップアップの動作がうまく実装できずにいて困っております。
設置したテスト環境
参考サイトのように、戻る動作をした時のみ回りながら表示させたいです。
発生している問題・分からないこと
最初は非表示のポップアップが最初から表示されてしまっています。
また動作を管理しているjavascriptが特定できていない状態です。
該当のソースコード
html
1 <!--test.html--> 2 3<div id="cv-tech-common-script" style="display: none;"><iframe id="cv-tech-common-script-iframe" src="./test_files/syncdata.html" name="53633723" frameborder="0" width="100%" height="100%" scrolling="no" loading="eager"></iframe></div><deepl-input-controller><template shadowrootmode="open"><link rel="stylesheet" href="chrome-extension://cofdbpoegempjloogbagkncekinflcnj/build/content.css"><div dir="ltr"><div class="dl-input-translation-container svelte-95aucy"><div></div></div></div></template></deepl-input-controller><script type="text/javascript" src="chrome-extension://cjfdbemmaeeohgibnhdhlakiahifjjcf/injected.js"></script><div class="ue-sidebar-container"><iframe src="./test_files/saved_resource.html"></iframe></div><div class="cv-tech-fancybox-placeholder" style="display: none;"></div><div id="cv-tech-modal-bg" style="background-color: rgba(0, 0, 0, 0.5); display: block;"></div><div class="cv-tech-fancybox-wrap cv-tech-fancybox-desktop cv-tech-fancybox-type-inline cv-tech-newspaper cv-tech-newspaper-transitions cv-tech-modal-show cv-tech-fancybox-opened" tabindex="-1" style="width: 500px; height: auto; position: fixed; top: 0px; left: 0px; transform-origin: 894px 434.5px; overflow: visible;"><div class="cv-tech-fancybox-skin" style="padding: 0px; width: auto; height: auto;"><div class="cv-tech-fancybox-outer"><div class="cv-tech-fancybox-inner" style="overflow: visible; width: 0px; height: 0px;"><div id="cv-tech-modal-main-top" data-cv-tech-fancybox-type="inline" style="display: block;"><div id="cv-tech-modal-main" style="width: 500px; height: 500px; left: 644px; top: 184.5px; position: relative; display: block;"><div id="cv-tech-modal-close-contents"><div id="cv-tech-modal-close" style="border-radius: 30px; border: 2px solid rgb(254, 254, 254); box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 2px; width: 30px; height: 30px; margin: 0px 0px 0px 464px; cursor: pointer; background-color: rgba(0, 0, 0, 0.5);"><p style="height: 1em !important; width: 1em !important; display: table-cell !important; vertical-align: middle !important; text-align: center !important; margin: 0px !important; padding: 0px !important; font-size: large !important; color: rgb(255, 255, 255) !important; line-height: 0 !important;">×</p></div></div><div id="cv-tech-modal-contents" style="width: 500px; height: 500px; margin: 0px;"><iframe id="cv-tech-contents-iframe" src="./test_files/adpage.html" name="65884233" frameborder="0" scrolling="no" style="display: block !important; max-width: 100% !important; width: 500px !important; height: 500px !important;" loading="eager"></iframe></div></div></div></div></div></div></div><div class="cv-tech-fancybox-overlay cv-tech-fancybox-overlay-fixed" style="width: auto; height: auto; display: block;"></div>
html
1<!DOCTYPE html> 2<!-- saved from url=(0462)https://api.kaiu-marketing.com/visitor/adpage?m=65884233&uuid=03f369b12d7e401c9949bc41c570f8e3&site_id=5bde9324976b41ae9ecbe45885595a09&adid=08a588178ceb4a71a9d90bb2cfc9234b&labelid=3847ba89dd3c4568b09759aedb1d7d8b&bannerid=7f67a5005d5b4ef2912a8109f022a5f2&session_id=1f5d7737b0cb4240b9dda17af52cbc48&width=500&height=500&is_custom=0&device=0&browser=0&srcurl=https%3A%2F%2Fultratime.info&popup_pos=5&animation_type=5&cv_host=https%3A%2F%2Fapi.kaiu-marketing.com --> 3<html lang="jp"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <meta name="cvtech_iframe_srcurl" content="https://ultratime.info"> 5 6 <meta name="robots" content="noindex"> 7 <meta name="robots" content="nofollow"> 8 9 10 <title>AdPage</title> 11 12 <script type="text/javascript" src="./adpage.js"></script><link rel="stylesheet" href="./modal.css"><link rel="stylesheet" href="./jquery.fancybox.css"><script type="text/javascript" src="./jquery.min(1).js"></script> 13 </head> 14 <body style="margin: 0;"> 15 16 17 18 19 20 <div id="ads-container" img_width="500" img_height="500" style="position: absolute; display: table; width: 100%; height: 100%;"> 21<div id="ads-container-cell" style="display: table-cell; width: auto; height: auto; text-align: center; vertical-align: middle;"> 22 <a target="_top" style="text-decoration: none; color: initial;" href="https://lin.ee/d3HmUA0" href_altlink=""> 23 <img id="ads-banner-img" border-style="none" width="100vw" height="100vh" style="width: 100vw; height: 100vh; vertical-align: bottom;" src="./popup.png" alt="希望の風"> 24</a></div></div> 25 26 <!--adpage.html--> 27 28 29</body></html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
ポップアップが非表示になりましたが、表示までは行きついておらず、元の状態よりも悪化してしまったため元に戻しました。
リンク内容
その他chatGPTを参考にしましたが、解決には至っておりません。
補足
特になし
回答1件
あなたの回答
tips
プレビュー