モーダル/ポップアップクリック前にスクロールすると開始位置が変更される

Question

おはようございます。私は初心者のJSの質問を私は解決を助ける必要がある。最初は私は極端な初心者であり、自己教えるので無知を許しています。

私はビジネス用の新しいウェブサイトを構築しており、そのページの1つに顧客用のグリッドがあります。各製品には、製品に関する詳細情報を提供するためのモーダルを作成するボタンがあります。私は、これらの他のモーダルのいくつかの内部に異なるモーダルを持つためにオンラインで見つかったJSを使用しています。最初にページをスクロールした後、問題のモーダル（星の魚や海馬）をクリックすると、モーダルはさらに下に表示され、画面で切り取られます。

例：https://my.duda.co/preview/27d7a4cc?device=desktop&pageId=30782523

私はJSの著者は、ユーザーがスクロールした場合、モーダルを再配置するVARを含め知っているが、それは私に有利に働いていないか、私は「やるとドンする必要がある多くのものがありますそれについての知識はない。

私はまた、コードが不規則でおそらく一部の場所で冗長であることを知っています。私は専門家ではありません。マイJSFiddle：https://jsfiddle.net/shnt7vwu

<script> 
var $html = $(document.documentElement); 
var $modal = $('.modal-container'); 
function showModal() { 
$html.css('overflow', 'hidden'); 
$modal.show().css('overflow', 'auto'); 
} 
function hideModal() { 
$html.css('overflow', 'visible'); 
$modal.show().css('overflow','visible') 
} 
$('.modal-btn').on('click', showModal); 
$('.modal-close').on('click', hideModal); 
</script> 
<script> 
var scrollTop = ''; 
var newHeight = '100'; 
$(window).bind('scroll', function() { 
scrollTop = $(window).scrollTop(); 
newHeight = scrollTop + 100; 
}); 
$('.popup-trigger').click(function(e) { 
e.stopPropagation(); 
if(jQuery(window).width() < 767) { 
$(this).after($(this).nextAll('.popup:first')); 
$(this).nextAll('.popup:first').show().addClass 
('popup-mobile').css('top', 0); 
$('html, body').animate({ 
scrollTop: $(this).nextAll('.popup:first').offset().top 
}, 500); 
} else { 
$('.popup').hide(); 
$(this).nextAll('.popup:first').removeClass('popup-mobile').css 
('top', newHeight).toggle(); 
}; 
}); 
$('html').click(function() { 
$('.popup').hide(); 
}); 
$('.popup-btn-close').click(function(e){ 
$(this).parent().hide(); 
}); 
$('.popup').click(function(e){ 
e.stopPropagation(); 
}); 
</script> 

Answer 1

あなただけのすべてのモーダルを無効にし、その後

外に隠されたvh:100であなたのモーダルを持っているあなたの全体の有効overflow-yとdivの内側「のdiv体グリッド」ものを、置くことができ

、DIV正しいユーザーアクションが実行されるまで

このようにして、プラットフォーム間や境界ケースで折れる計算を避けることができます。