[javascript] 팝업 창을 화면 중앙에 배치 하시겠습니까?

JAVASCRIPT / 글쓴이

window.open화면 변수의 중심에 자바 스크립트 기능을 통해 열린 팝업 창 을 현재 선택된 화면 해상도로 어떻게 가운데에 배치 할 수 있습니까?

답변

싱글 / 듀얼 모니터 기능 ( http://www.xtf.dk에 신용 -감사합니다!)

업데이트 : @Frost 덕분에 화면의 너비와 높이에 도달하지 않은 창에서도 작동합니다!

듀얼 모니터를 사용하는 경우 창은 가로로 가운데에 위치하지만 세로로 표시되지는 않습니다 …이 기능을 사용하여 설명하십시오.

const popupCenter = ({url, title, w, h}) => {
    // Fixes dual-screen position                             Most browsers      Firefox
    const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    const systemZoom = width / window.screen.availWidth;
    const left = (width - w) / 2 / systemZoom + dualScreenLeft
    const top = (height - h) / 2 / systemZoom + dualScreenTop
    const newWindow = window.open(url, title, 
      `
      scrollbars=yes,
      width=${w / systemZoom}, 
      height=${h / systemZoom}, 
      top=${top}, 
      left=${left}
      `
    )

    if (window.focus) newWindow.focus();
}

사용 예 :

popupCenter({url: 'http://www.xtf.dk', title: 'xtf', w: 900, h: 500});

크레딧은 다음으로 이동합니다 : http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html (이 웹 사이트는 코드는 여기에 있습니다, 건배!)

답변

다음과 같이 시도하십시오.

function popupwindow(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}

답변

다중 모니터 설정에서 현재 화면의 중심을 결정하기가 복잡하기 때문에 더 쉬운 옵션은 부모 창 위에 팝업을 집중시키는 것입니다. 부모 창을 다른 매개 변수로 전달하면됩니다.

function popupWindow(url, title, win, w, h) {
    const y = win.top.outerHeight / 2 + win.top.screenY - ( h / 2);
    const x = win.top.outerWidth / 2 + win.top.screenX - ( w / 2);
    return win.open(url, title, `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${w}, height=${h}, top=${y}, left=${x}`);
}

이행:

popupWindow('google.com', 'test', window, 200, 100);

답변

출처 : http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen

function PopupCenter(pageURL, title,w,h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
  return targetWin;
}

답변

현재있는 프레임의 중앙에 놓으려면이 기능을 권장합니다.

function popupwindow(url, title, w, h) {
    var y = window.outerHeight / 2 + window.screenY - ( h / 2)
    var x = window.outerWidth / 2 + window.screenX - ( w / 2)
    return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + y + ', left=' + x);
}

Crazy Tim의 답변과 비슷하지만 window.top을 사용하지 않습니다. 이렇게하면 창이 다른 도메인의 iframe에 포함되어 있어도 작동합니다.

답변

Firefox에서 잘 작동합니다.
상단 변수를 다른 이름으로 변경하고 다시 시도하십시오.

        var w = 200;
        var h = 200;
        var left = Number((screen.width/2)-(w/2));
        var tops = Number((screen.height/2)-(h/2));

window.open("templates/sales/index.php?go=new_sale", '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);

답변

나의 추천은 나머지 공간에서 최고 위치를 33 % 또는 25 %를 사용하는 것입니다,
다른 예로하지 50 %, 여기에 게시
주로 때문에의 창 헤더 ,
사용자에게보다 효율적이고 편안하게보고있는

완전한 코드 :

    <script language="javascript" type="text/javascript">
        function OpenPopupCenter(pageURL, title, w, h) {
            var left = (screen.width - w) / 2;
            var top = (screen.height - h) / 4;  // for 25% - devide by 4  |  for 33% - devide by 3
            var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
        } 
    </script>
</head>
<body>
    <button onclick="OpenPopupCenter('http://www.google.com', 'TEST!?', 800, 600);">click on me</button>
</body>
</html>

이 줄을 확인하십시오 :
var top = (screen.height-h) / 4; // 25 %-4만큼 이탈 | 33 %-3만큼 편차