與造型

中心的彈出我創建一個網站，以瞭解如何編寫HTML/CSS & JSS和我在與加載彈出框有點問題，像這樣的，這將在按鈕的點擊運行https://gyazo.com/57865b1e9df5054be787f231693a6a6f 與造型

我發現這個解決方案，但是當我試圖實現它c9.io網站，我得到一個錯誤的：

寬度沒有定義，請修復或添加/ 全球寬度/

function PopupCenterDual(url, title, w, h) { 
    // Fixes dual-screen position Most browsers Firefox 
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left; 
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top; 

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

var left = ((width/2) - (w/2)) + dualScreenLeft; 
var top = ((height/2) - (h/2)) + dualScreenTop; 
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); 

// Puts focus on the newWindow 
if (window.focus) { 
newWindow.focus(); 
}

運行腳本時，它會打開左上角的窗口。我相信這可能是因爲我沒有設置要打開的框的寬度，但找不到正確的位置。

任何幫助&解釋將不勝感激。

來源

2016-01-04 Zach

：

如果你想使用一個div而不是對外的窗口，你可以使用純CSS？ –

從一個主頁，這是位於一個JavaScript文件 – Zach

這是方法的定義，我問的方法調用。這將是一個按鈕/鏈接'onclick'事件。 –

-1

其實，example provided是一個div。從你在哪裏調用`PopupCenterDual`方法

.popup { 
    /*center the div*/ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 

    /*dimensions and other settings*/ 
    box-sizing: border-box; 
    width: 50%; 
    padding: 2em; 
    } 

body { 
    width: 100%; 
    height: 100%; 
}

由於Chris Choyier

來源

2016-01-04 14:43:44 parameciostudio

-1

這是一個居中的div造型，我把它從一個功能我用在一個div顯示消息：style="position: fixed;width: 50%; left: 25%; top: 30%;"

來源

2016-01-04 14:17:08

回答

相關問題