Wie kann ich das Skript mit Prozentsatz arbeiten lassen?

Question

Ich habe dieses Pop-up-Fenster durch JavaScript mit px zentriert. Ich brauche die Box, um zu reagieren, wie kann ich das Skript anpassen, um für Prozentsätze und nicht px zu berechnen. Ist es möglich? Dieser aktuelle Code ermöglicht es mir, ein automatisches Popup zu erstellen, aber es hat auch ein Skript, das den Pop mit px zentriert. Dies ist nicht ansprechend.

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

Dies scheint eine Menge von Javascript verwenden, um ein Popup-Dialogfeld angezeigt werden . Sie können diese Funktionalität nur mit CSS/HTML erreichen, obwohl viele Lösungen HTML/CSS für das Layout verwenden und einige Javascript, um den Dialog ein-/auszublenden.

Ich mag es überhaupt nicht Javascript für das tatsächliche Layout der Webseite zu verwenden, wie zum Beispiel Positionierungselemente. CSS wurde speziell zum Positionieren und Stylen von Webelementen entwickelt und ist im Allgemeinen effizienter als JS.

Sie können einige der vielen online verfügbaren Anleitungen für HTML/CSS Modal Dialoge ausprobieren. Diese sind mit minimalem Javascript gemacht.

Schauen Sie sich dieses für den Anfang

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

Viel Glück

Answer 2

Sie brauchen wirklich kein JavaScript um etwas zu zentrieren - dafür haben wir CSS! Zur Zentrierung horizontal etwas, verwenden Sie einfach das folgende CSS auf dem Element

margin: auto; 

vertikal etwas zu zentrieren, Sie so etwas wie

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