javascript - 使用 DIV 作为弹出窗口

Question

我正在构建一个需要多个弹出窗口来显示某些元素的额外信息的页面，所以我使用 DIV 的标签构建弹出窗口，只需将显示更改为阻止或无并且位置是绝对的，当我应该显示弹出窗口时单击图像按钮，它应该贴在该按钮旁边，现在我的主要问题是当我显示 div 时，页面会自动一直滚动到页面的开头，这使我的弹出窗口位于错误的位置，我怎样才能避免这种行为？

这是我的 javascript，我使用 baseElent 将 div 放置在我的图像按钮旁边

function popup(windowName, baseElement, orientation) {
    var ventana = document.getElementById(windowName);
    var windowOrigStyle = ventana.style.display;
    if (lastOpenedWindow != null) 
        lastOpenedWindow.style.display = "none";

    if (windowOrigStyle == 'none') {
        var base = document.getElementById(baseElement);
        var basePosition = base.getBoundingClientRect()
        if (orientation == 'left') {
            var width = ventana.currentStyle.width.replace(/px/g, "");
            var popupTop = basePosition.top;
            var popupLeft = basePosition.left - width - 2;
            popupTop -= 10;
        }
        else {
            var popupTop = basePosition.top;
            var popupLeft = basePosition.right;
            popupTop -= 10;
            popupLeft += 3;
        }
        ventana.style.left = popupLeft + 'px';
        ventana.style.top = popupTop + 'px';
        ventana.style.display = "block";
        lastOpenedWindow = ventana;
    }
    else
        ventana.style.display = "none";
}

Answer 1

使用 Jquery 动态弹出窗口。只需将 div id 传递给方法。演示：http: //jquerymobile.com/demos/1.3.0-beta.1/docs/demos/popups/dynamic-popup.html#demo-page

Answer 2

使用固定位置代替绝对位置。

div {
position: fixed;
}