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

我有這個彈出窗口正在由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

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

回答

相關問題