javascript - 滚动后打开 javascript 窗口

Question

我已经搜索过，但没有找到任何可以帮助我的东西...我创建了一个 javascript 函数，当我单击图片时打开一个窗口...但是我的屏幕有很多图片，当我向下滚动并单击图片，窗口没有在我所在的位置打开，它在页面的开头打开..

    function CreateWindow()
    {       
    vWidth = '300';
    vHeight = '300';
    var Title = '';

    var div = document.body;
    div.innerHTML = div.innerHTML + "<div id='telamodal' class='telamodal'></div>";

    var ratio = window.devicePixelRatio || 1;
    var vleft = ((screen.width * ratio)/2)-(vWidth/2);
    var vtop = ((screen.height * ratio)/2)-(vHeight/1.5);                   

    var divTelaConfirma = document.getElementById('telamodal'); 
    divTelaConfirma.innerHTML = divTelaConfirma.innerHTML + "<div id='telaetapa' class='telaetapa'></div>";

    document.getElementById("telaetapa").style.width=vWidth + 'px';
    document.getElementById("telaetapa").style.height=vHeight + 'px';               
    document.getElementById("telaetapa").style.top= vtop + 'px';
    document.getElementById("telaetapa").style.left= vleft + 'px';                          

    var divCaixaConfirma = document.getElementById('telaetapa');    
    divCaixaConfirma.innerHTML = divCaixaConfirma.innerHTML + "<div id='telaetapa_titulo' class='telaetapa_titulo'></div>";

    var divCaixaTitulo = document.getElementById('telaetapa_titulo');   
    divCaixaTitulo.innerHTML = divCaixaTitulo.innerHTML + "<h id='telaetapatitulo_texto'>" + Title + "</h><img src='imagens/fechartela.png' id='but_fechartela' class='but_fechartela'/>";

    var divCaixaConfirma1 = document.getElementById('telaetapa');   
    divCaixaConfirma1.innerHTML = divCaixaConfirma1.innerHTML + "<div id='telaetapa_corpo' class='telaetapa_corpo'></div>";

    OpenScreen('telamodal');    
}

function OpenScreen(elementname) 
   {
       el = document.getElementById(elementname);
       el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
   }

有人可以帮助我吗？提前致谢! :)

Answer 1

通过一些样式可以很简单地解决这个问题；一个简单的解决方案就是使您创建的窗口固定而不是绝对(我猜测它是根据您描述的行为进行绝对定位的)。

考虑以下更新:

在您设置 .telamodal 样式的 CSS 文件中

.telamodal{
    position: fixed;
    ...
}

通过为该元素指定屏幕上的固定位置，无论您如何滚动，它都会保持在原位(相对于其在屏幕上的位置)。

如果由于某种原因fixed元素不适合您的特定项目，另一个解决方案是添加一个偏移量(基于用户距元素顶部的距离)元素的 top 属性。