繁体   English   中英

使用DIV作为弹出窗口

[英]Using a DIV as a popup window

我正在构建一个需要几个弹出窗口以显示某些元素的额外信息的页面,因此我使用DIV的标签构建了弹出窗口,只是将显示更改为block或不显示,并且位置是绝对的,当我单击图像按钮,它应该粘在该按钮旁边,现在我的主要问题是,当我显示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";
}

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

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

div {
position: fixed;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM