如何使脚本以百分比工作？

我有这个弹出窗口正在由javascript使用px中心。我需要这个盒子来响应，所以我怎样才能调整脚本来计算百分比而不是px。可能吗？这个当前的代码允许我产生一个自动弹出，但它也有一个脚本，它使用px来对齐弹出窗口。这不响应。如何使脚本以百分比工作？

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);  
    }

来源

2016-05-13 Destini X

究竟是你想实现什么目标？当你点击一个按钮或者某个东西时，屏幕居中显示一个模式对话框？ – element11

这是一个自动弹出这个当前的代码做到这一点，但也需要你使用px来定位框 –

这似乎是一个可怕的很多JavaScript来显示弹出对话框。您可以单独使用CSS/HTML来完成此功能，但许多解决方案都会使用HTML/CSS进行布局，并使用一些JavaScript来显示/隐藏对话框。

我不喜欢使用JavaScript的所有网页的实际布局，如定位元素。 CSS是专门为定位和设计网页元素而设计的，它通常比JS更高效。

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

退房这一个初学者

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

好运

来源

2016-05-13 22:29:31 element11

有没有办法自动做到这一点，用户不必点击一下？ –

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

margin: auto;

上垂直居中的东西，你可以使用像

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

来源

2016-05-13 20:38:57 Pandaqi

如何使脚本以百分比工作？

回答

相关问题