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

您可以放置整个＆lt; div体网格＆＃39;启用了overflow-y的div中的内容，然后将您的模式隐藏在{/ 1}}外面

只需禁用所有modals，div属性，直到采取正确的用户操作。

通过这种方式，您可以避免在平台和边缘情况下可能会中断的计算。

如果在点击

1 个答案: