代码之家  ›  专栏  ›  技术社区  ›  Zo Has

在屏幕上居中显示弹出窗口?

  •  250
  • Zo Has  · 技术社区  · 15 年前

    如何将通过javascript打开的弹出窗口居中 window.open 屏幕变量中心的函数是否为当前选定的屏幕分辨率?

    13 回复  |  直到 15 年前
        1
  •  402
  •   Agamemnus    7 年前

    http://www.xtf.dk

    function PopupCenter(url, title, w, h) {
        // Fixes dual-screen position                         Most browsers      Firefox
        var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
        var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;
    
        var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
        var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
    
        var systemZoom = width / window.screen.availWidth;
    var left = (width - w) / 2 / systemZoom + dualScreenLeft
    var top = (height - h) / 2 / systemZoom + dualScreenTop
        var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w / systemZoom + ', height=' + h / systemZoom + ', top=' + top + ', left=' + left);
    
        // Puts focus on the newWindow
        if (window.focus) newWindow.focus();
    }
    

    PopupCenter('http://www.xtf.dk','xtf','900','500');  
    

    http://www.xtf.dk/2011/08/center-new-popup-window-even-on.html

        2
  •  316
  •   oezi    15 年前

    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);
    } 
    
        3
  •  29
  •   CrazyTim    9 年前

    function popupwindow(url, title, win, w, h) {
        var y = win.top.outerHeight / 2 + win.top.screenY - ( h / 2)
        var 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);
    } 
    
        4
  •  22
  •   Mimouni    10 年前

    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;
    } 
    
        5
  •  13
  •   Himanshu THE ONLY ONE    13 年前


            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);
    
        6
  •  13
  •   Taugenichts    10 年前

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

        7
  •  5
  •   mr.baby123    12 年前






        <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>
    




        8
  •  5
  •   Robert Mars_win    10 年前

    element{
    
    position:fixed;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
    
    }
    
        9
  •  3
  •   Roland Soós    8 年前

    function PopupCenter(url, title, w, h) {
      var userAgent = navigator.userAgent,
          mobile = function() {
            return /\b(iPhone|iP[ao]d)/.test(userAgent) ||
              /\b(iP[ao]d)/.test(userAgent) ||
              /Android/i.test(userAgent) ||
              /Mobile/i.test(userAgent);
          },
          screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft,
          screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop,
          outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.documentElement.clientWidth,
          outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : document.documentElement.clientHeight - 22,
          targetWidth = mobile() ? null : w,
          targetHeight = mobile() ? null : h,
          V = screenX < 0 ? window.screen.width + screenX : screenX,
          left = parseInt(V + (outerWidth - targetWidth) / 2, 10),
          right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10),
          features = [];
      if (targetWidth !== null) {
        features.push('width=' + targetWidth);
      }
      if (targetHeight !== null) {
        features.push('height=' + targetHeight);
      }
      features.push('left=' + left);
      features.push('top=' + right);
      features.push('scrollbars=1');
    
      var newWindow = window.open(url, title, features.join(','));
    
      if (window.focus) {
        newWindow.focus();
      }
    
      return newWindow;
    }
    
        10
  •  2
  •   Mike T    9 年前

    function openPopupCenter(url, title, w, h) {
      // Fixes dual-screen position
      // Most browsers use window.screenLeft
      // Firefox uses screen.left
      var dualScreenLeft = getFirstNumber(window.screenLeft, screen.left),
        dualScreenTop = getFirstNumber(window.screenTop, screen.top),
        width = getFirstNumber(window.innerWidth, document.documentElement.clientWidth, screen.width),
        height = getFirstNumber(window.innerHeight, document.documentElement.clientHeight, screen.height),
        left = ((width / 2) - (w / 2)) + dualScreenLeft,
        top = ((height / 2) - (h / 2)) + dualScreenTop,
        newWindow = window.open(url, title, getSpecs());
    
      // Puts focus on the newWindow
      if (window.focus) {
        newWindow.focus();
      }
    
      return newWindow;
    
      function getSpecs() {
        return 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left;
      }
    
      function getFirstNumber() {
        for(var i = 0, len = arguments.length; i < len; i++) {
          var value = arguments[i];
    
          if (typeof value === 'number') {
            return value;
          }
        }
      }
    }
    
        11
  •  1
  •   ByteHamster hexerei software    10 年前
    function fnPopUpWindow(pageId) {
         popupwindow("hellowWorld.php?id="+pageId, "printViewer", "500", "300");
    }
    
    function popupwindow(url, title, w, h) {
        var left = Math.round((screen.width/2)-(w/2));
        var top = Math.round((screen.height/2)-(h/2));
        return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, '
                + 'menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w 
                + ', height=' + h + ', top=' + top + ', left=' + left);
    }
    
    <a href="javascript:void(0);" onclick="fnPopUpWindow('10');">Print Me</a>
    

    Math.round

        12
  •  0
  •   nanobar    7 年前

    function popupCenter(url, title, w, h) {
      const hasSpace = window.matchMedia(`(min-width: ${w + 20}px) and (min-height: ${h + 20}px)`).matches;
      const isDef = v => typeof v !== 'undefined';
      const screenX = isDef(window.screenX) ? window.screenX : window.screenLeft;
      const screenY = isDef(window.screenY) ? window.screenY : window.screenTop;
      const outerWidth = isDef(window.outerWidth) ? window.outerWidth : document.documentElement.clientWidth;
      const outerHeight = isDef(window.outerHeight) ? window.outerHeight : document.documentElement.clientHeight - 22;
      const targetWidth = hasSpace ? w : null;
      const targetHeight = hasSpace ? h : null;
      const V = screenX < 0 ? window.screen.width + screenX : screenX;
      const left = parseInt(V + (outerWidth - targetWidth) / 2, 10);
      const right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10);
      const features = [];
    
      if (targetWidth !== null) {
        features.push(`width=${targetWidth}`);
      }
    
      if (targetHeight !== null) {
        features.push(`height=${targetHeight}`);
      }
    
      features.push(`left=${left}`);
      features.push(`top=${right}`);
      features.push('scrollbars=1');
    
      const newWindow = window.open(url, title, features.join(','));
    
      if (window.focus) {
        newWindow.focus();
      }
    
      return newWindow;
    }
    
        13
  •  0
  •   Giuseppe Siragusa    6 年前

    function 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 left = (window.screen.width/2)-(w/2) + dualScreenLeft;
        const top = (window.screen.height/2)-(h/2) + dualScreenTop;
        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);
    }