滚动后打开javascript窗口

时间:2015-12-02 01:30:03

标签: javascript

我已经搜索过,但我没有找到任何帮助我...我创建了一个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";
   }

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

1 个答案:

答案 0 :(得分:0)

这个问题可以通过一些造型很简单地解决;一个简单的解决方案就是让你创建的窗口是固定的而不是绝对的(我猜它是根据你描述的行为绝对定位的。)

考虑以下更新:

在您设置.telamodal

的样式的CSS文件中
.telamodal{
    position: fixed;
    ...
}

通过在屏幕上为此元素提供固定位置,无论您如何滚动,它都将保持在原位(相对于其在屏幕上的位置)。

如果由于某种原因,fixed元素对您的特定项目没有好处,另一种解决方案是添加偏移量(基于用户距元素顶部的距离)到{{ 1}}元素的属性。