Question

我使用px将此弹出窗口置于javascript中心。我需要响应框，所以我如何调整脚本来计算百分比而不是px。可能吗？这个当前代码允许我生成一个自动弹出窗口，但它也有脚本使用px使pop中心。这没有回应。

function toggle(div_id) {
    var el = document.getElementById(div_id);
    if ( el.style.display == 'none' ) { el.style.display = 'block';}
    else {el.style.display = 'none';}
}

    function blanket_size(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportheight = window.innerHeight;
        } else {
            viewportheight = document.documentElement.clientHeight;
        }
        if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
            blanket_height = viewportheight;
        } else {
            if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
            } else {
                blanket_height = document.body.parentNode.scrollHeight;
            }
        }
        var blanket = document.getElementById('blanket');
        blanket.style.height = blanket_height + 'px';
        var popUpDiv = document.getElementById(popUpDivVar);
        popUpDiv_height=blanket_height/2-187.5;//200 is half popup's height
        popUpDiv.style.top = popUpDiv_height + 'px';
    }
    function window_pos(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerHeight;
        } else {
            viewportwidth = document.documentElement.clientHeight;
        }
        if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
            window_width = viewportwidth;
        } else {
            if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                window_width = document.body.parentNode.clientWidth;
            } else {
                window_width = document.body.parentNode.scrollWidth;
            }
        }
        var popUpDiv = document.getElementById(popUpDivVar);
        window_width=window_width/2-250;//200 is half popup's width
        popUpDiv.style.left = window_width + 'px';
    }
    function popup(windowname) {
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname);     
    }

Answer 1

你真的不需要JavaScript来集中东西 - 为此，我们有CSS！要水平居中，只需在元素上使用以下CSS

margin: auto;

要垂直居中，可以使用

之类的东西

top: 50%;
transform: translateY(-50%);
position:relative;

Answer 2

这似乎是一个显示弹出对话框的大量javascript。您可以单独使用CSS / HTML来完成此功能，尽管许多解决方案将使用HTML / CSS进行布局，并使用一些javascript来显示/隐藏对话框。

我不喜欢使用javascript来实现网页的实际布局，例如定位元素。 CSS专门用于定位和样式化Web元素，它通常比JS更有效。

您可能需要查看一些在线提供的HTML / CSS模态对话框中的一些指南。这些都是用最少的javascript完成的。

为初学者查看这个

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

祝你好运

如何使脚本与百分比一起工作？

2 个答案: