前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー