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 Dynamic弹出窗口。只需将div id传递给Method即可。演示：http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/popups/dynamic-popup.html#demo-page

Answer 2

而不是绝对位置使用固定位置。

div {
position: fixed;
}

使用DIV作为弹出窗口

2 个答案: