webサイトにてポップアップのが画像を表示させようと思うのですが、ポップアップ画像は、webページを読み込んだ直後に表示させようとおもうのですが、
最近のブラウザでは、ポップアップ広告をブロックできるらしいのですが、ブッロクされにくいポップアップとはどうのようなものがありますでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答3件
3
(ポップアップ == ポップアップウィンドウ と見なして回答します)
最優先で考えることは、ポップアップウィンドウを使う仕様をやめることです。スマートフォンなどではポップアップウィンドウはできないわけですし、現在はポップアップウィンドウは現実的ではありません。
ページロード時にポップアップウィンドウを開く動作だとほぼ間違いなくブロックされます。ユーザにブロックを解除する方法をガイドするなどで対処するしかありません。
ユーザのアクション(マウスのクリック、タッチ、キーボードの打鍵)をトリガーにしてポップアップを開くのはブロックされにくいそうです。
投稿2023/03/13 09:25
編集2023/03/13 21:34総合スコア20141
3
ベストアンサー
dialogを使ったmodalはブロックされにくいです。
javascript
1 2<style> 3#dlg{ 4border:0; 5width:1000px; 6height:480px; 7margin:0px; 8padding:0; 9border:outset 2px; 10left:calc(50% - 500px); 11top:calc(50% - 240px); 12} 13</style> 14<script> 15window.addEventListener('DOMContentLoaded', ()=>{ 16 const noscroll=(e)=>e.preventDefault(); 17 const scrollEvents=["touchmove","wheel","mousewheel","scroll"]; 18 scrollEvents.forEach(e=>document.addEventListener(e,noscroll,{passive:false})); 19 dlg.showModal(); 20 document.addEventListener('click',()=>{ 21 dlg.close(); 22 }); 23 dlg.addEventListener('close',()=>{ 24 scrollEvents.forEach(e=>document.removeEventListener(e,noscroll,{passive:false})); 25 }); 26}); 27</script> 28<dialog id="dlg"> 29<img src="http://placeimg.com/1000/480/any" alt="any"> 30</dialog> 31<br><br><br><br><br><br><br><br><br><br>1 32<br><br><br><br><br><br><br><br><br><br>2 33<br><br><br><br><br><br><br><br><br><br>3 34<br><br><br><br><br><br><br><br><br><br>4 35<br><br><br><br><br><br><br><br><br><br>5
投稿2023/03/13 08:14
編集2023/03/13 08:55総合スコア113594
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
回答へのコメント

1
ブッロクされにくいポップアップとはどうのようなものがありますでしょうか?
重要な情報が書いてあって、ブロックしてはサイトを使用するのに支障するようなポップアップであれば、ユーザー自身でブロックを止めると思います。
投稿2023/03/13 08:40
総合スコア144596
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
回答へのコメント

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
同じタグがついた質問を見る
CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/03/21 09:59