質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.40%
ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

275閲覧

ポップアップを参考サイトのように動作させたい

ega7

総合スコア4

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2024/06/10 11:20

実現したいこと

参考サイトをダウンロードし、まるっとコピーしようとしております。
参考サイト
その中で、ポップアップの動作がうまく実装できずにいて困っております。
設置したテスト環境
参考サイトのように、戻る動作をした時のみ回りながら表示させたいです。

発生している問題・分からないこと

最初は非表示のポップアップが最初から表示されてしまっています。
また動作を管理している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を参考にしましたが、解決には至っておりません。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2024/06/11 00:35

参考サイトのどの動作を実現したいのでしょうか?
Lhankor_Mhy

2024/06/11 00:44

参考サイトでポップアップはどのようにすれば表示されますか?
guest

回答1

0

自己解決

ダウンロード元のデータの修正にて解消しました。

投稿2024/06/11 03:36

ega7

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.40%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問