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

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

新規登録して質問してみよう
ただいま回答率
85.50%
UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

jQuery

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

Q&A

解決済

1回答

1627閲覧

jQueryで作ったmodalの背景(shade)がスクロールに従って透明度を失ってしまう。

Tomowe_kosaka

総合スコア27

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

jQuery

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

0グッド

0クリップ

投稿2018/09/26 09:01

編集2018/09/26 09:29

イメージ説明

前提・実現したいこと

jQueryで作成しています。

発生している問題・エラーメッセージ

modalの背景(shade)がスクロールに従って透明度を失ってしまう。
→ opacity:0.3に設定しているshadeが、スクロールしていくとopacity:1になる。
→ scrollごとに

<div id="shade"></div>

が生成されていた。1回だけにしたい。

該当のソースコード

html

1<div id="modalwin" class="modalwin hide fadein"> 2 <a herf="#" class="modal-close"></a> 3 <div class="modalwin-contents"> 4 <button id="modal-btn" class="btn">×</button> 5 modalwin-contents 6 </div> 7</div>

jQuery

1 function showModal(event) { 2 3 var $shade = $('<div></div>'); 4 $shade.attr('id', 'shade'); 5 6 var $modalWin = $('#modalwin'); 7 var $window = $(window); 8 var posX = ($window.width() - $modalWin.outerWidth()) / 2; 9 var posY = ($window.height() - $modalWin.outerHeight()) / 2; 10 11 $modalWin 12 .before($shade) 13 .css({left: posX, top: posY}) 14 .removeClass('hide') 15 .addClass('show') 16 .on('click', '.btn', function () { 17 hideModal(); 18 }); 19 20 } 21 22 function hideModal() { 23 $('#shade').remove(); 24 $('#modalwin').removeClass('show').addClass('hide'); 25 } 26 27 28$(window).on('scroll' ,function(){ 29 30 $('#modalwin').each(function(){ 31 var scroll = $(window).scrollTop(); 32 var windowHeight = document.documentElement.scrollHeight; 33 var readCont = Math.round((scroll / windowHeight) *100); 34 35 if (readCont>=20){ 36 $('#modalwin').addClass('scrollin'); 37 showModal(); 38 $('#modalwin').off('scroll'); 39 } 40 }); 41 }); 42

試したこと

CSSのscrollinの透明度を0.3にしたり、 $('#shade').css('opacity','0.3');を書き加えたりしました。

補足情報(FW/ツールのバージョンなど)

Bracketsリリース 1.13 ビルド 1.13.0-17696
jQueryのバージョン不明
発生するブラウザ Chrome 68.0.3440.106

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

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

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

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

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

m.ts10806

2018/09/26 09:05

「透明度を失う」とは具体的にどういう現象が起きるのでしょうか。画面キャプチャの提示は可能ですか?また現象が再現するブラウザの種類とバージョンを追記してください。再現確認も行う必要があるように思うのでhtmlとjQueryのバージョンも追記してください。
x_x

2018/09/26 09:32

重複するidはつけられないので、idを外して確認してもらえますか?
guest

回答1

0

自己解決

$(window).on('scroll', function(e){ if (readCont>=20) { $('#modalwin').addClass('scrollin'); showModal(); $('#modalwin').off(e);

.off()する場所を変えた。

投稿2018/09/26 09:49

Tomowe_kosaka

総合スコア27

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問