Question

所以我有一个小网站，当我点击链接时显示div，所以窗口在前面。

只需点击绿色的大框架，您就会看到窗口打开。现在的问题是，如果你打开它，并尝试滚动，而没有点击内容，它将不会滚动，而它应该。我该如何解决这个问题？

调用的代码就是这个，动画的东西是基于关键帧的。

function displayBox(boxId, closeButtonId) {
    displayButton(closeButtonId);
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxIn');
    Box.setAttribute('tabIndex', '0');
}
function displayButton(buttonId) {
    var Box = document.getElementById(buttonId);
    Box.setAttribute('class', 'buttonIn');
}           
function hideBox(boxId, closeButtonId) {
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxOut');
    setTimeout(function(){var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'invisible');},500);
    hideButton(closeButtonId);
}
function hideButton(buttonId) {
    var Box = document.getElementById(buttonId);
    Box.setAttribute('class', 'invisible');
}

提前谢谢

Answer 1

您需要将注意力放在新弹出窗口上。尝试将Box.focus()调用添加到displayBox函数：

function displayBox(boxId, closeButtonId) {
    displayButton(closeButtonId);
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxIn');
    Box.setAttribute('tabIndex', '0');
    setTimeout(function() {
        Box.focus();
    }, 300);
}

请注意，由于您为模态弹出窗口设置了动画，因此您需要在动画完成后关注内容。实现它的最简单方法是在超时后调用focus()等于动画持续时间，在您的情况下300ms。如果你不想在JS函数中硬编码动画时序，那么你应该听animationend事件。

Answer 2

您已在css中为html标记设置了overflow：hidden，因此页面不会滚动。

删除它以修复。

溢出是一种解释如何处理不适合窗口大小的内容。隐藏意味着：隐藏它并且根本不显示。如果您未指定任何内容，则滚动是默认设置。

无法专注于div（如果我使用鼠标滚动则不会滚动，除非我点击内容）

2 个答案: