모달/팝업 스크롤 할 때 시작 위치를 변경하기 전에 클릭

Question

좋은 아침입니다. 초급 JS 질문에 도움이 필요합니다. 첫째로 나는 극단적 인 초심자이고 자율적 인 가르침은 어떤 무지든지 용서한다.

저는 비즈니스를위한 새로운 웹 사이트를 구축 중이며 페이지 중 하나에는 고객을위한 제품 격자가 있습니다. 각 제품에는 제품에 대한 추가 정보를 제공하는 모달을 만드는 버튼이 있습니다. 나는 다른 모달 중 일부의 내부에 다른 모달을 가지고 온라인으로 찾은 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 올바른 사용자 조치가 취해질 때까지

이렇게하면 플랫폼과 가장자리 사이에서 깨질 수있는 계산을 피할 수 있습니다.