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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

ポップアップ

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

2368閲覧

jQueryでスクロールしたらポップアップを表示させて閉じるボタンを押したら消したいけど上手く動作しない

ryu0947

総合スコア5

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

ポップアップ

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/04/12 02:06

前提・実現したいこと

jQueryでページを一定量スクロールしたらポップアップを表示させて閉じるボタンを押して閉じられるようにしたいです。

現状スクロールしたらポップアップを表示させてボタンを押したら閉じるようにする事は出来ましたが
閉じた後スクロールするとまたポップアップが出てきてしまいます。

やりたい事としてはポップアップを表示させて閉じたあとは表示させないようにしたいです。

イメージ説明

該当のソースコード

HTML

1<div id="popup"> 2 <div class="popup-content"> 3 <p>ポップアップ</p> 4 <button>閉じる</button> 5 </div> 6 </div>

jQuery

1<script> 2 $(function() { 3 var popup = $('#popup') 4 $(window).scroll(function() { 5 if ($(this).scrollTop() > 300) { 6 popup.fadeIn(); 7 } else { 8 popup.hide(); 9 } 10 }); 11 $('button').click(function() { 12 $('#popup').hide(); 13 }); 14 }); 15</script>

試したこと

何とか解決しようとググっていますが、clickイベントでポップアップを実装する方法しか見つからず
scrollイベントで実装する方法が見つけられていません。
また閉じた後に表示させない方法としてブラウザのcookieを使う方法がありますがscrollイベントとどう組み合わせたらいいのか全く分かりませんでした。

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

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

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

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

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

guest

回答3

0

ベストアンサー

js

1 $(function() { 2 var popup = $('#popup'); 3 var flag = true; // (コードは書いていないけど)ローカルストレージにでも保存しておけばいい 4 $(window).scroll(function() { 5 if (flag && $(this).scrollTop() > 300) { 6 popup.fadeIn(); 7 } else { 8 popup.hide(); 9 } 10 }); 11 $('button').click(function() { 12 flag = false; // (コードは書いていないけど)ローカルストレージにでも保存しておけばいい 13 $('#popup').hide(); 14 }); 15 });

【Window.localStorage - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

【ブラウザにデータを保存するlocalStorage(ローカルストレージ)の使い方 | 株式会社グランフェアズ】
https://www.granfairs.com/blog/staff/local-storage-01

投稿2020/04/12 02:28

kei344

総合スコア69364

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

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

ryu0947

2020/04/12 03:42

ご回答頂きありがとうございます! ローカルストレージ。全く知らなかったです。 これを使えば別ページに移動して戻ってきてもポップアップが表示されないですね。 お手数をおかけして申し訳ないのですが、ローカルストレージの概念は理解できましたが実際にどこにどう書いたら良いのかが理解できていません... コメントをつけてくださったvar flag = true/falseの箇所にlocalStorage.setItem('キー', '値');でローカルストレージへ保存してlocalStorage.getItem('キー');で保存された値を取り出す形でよろしいのでしょうか?
kei344

2020/04/12 04:32

「var flag = true/falseの箇所」に保存しておいたキーがあれば代入し、保存していなかったら初期値を入れます。クリック時にキーを保存します。
ryu0947

2020/04/12 06:59

ありがとうございます! がんばって実装してみます!!
guest

0

javascript

1<script> 2 let opened = false; 3 $(function() { 4 var popup = $('#popup') 5 $(window).scroll(function() { 6 if (opened == false && $(this).scrollTop() > 300) { 7 opened = true; 8 popup.fadeIn(); 9 } else { 10 popup.hide(); 11 } 12 }); 13 $('button').click(function() { 14 $('#popup').hide(); 15 }); 16 }); 17</script>

投稿2020/04/12 03:38

編集2020/04/12 04:08
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

ryu0947

2020/04/12 04:37

ご回答頂きありがとうございます!
guest

0

buttonタグのデフォルトtypeはsubmitなのでtype=buttonを明示的に与えてやると良さそうに思います。

投稿2020/04/12 02:21

m.ts10806

総合スコア80765

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

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

ryu0947

2020/04/12 03:34

ご回答頂きありがとうございます。 そうですね! buttonも種類があるので送信ボタンではなくただのボタンとして名前を与えないといけないですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問