Javascript彈出框位置

我想實現一個javascript彈出框，但我不確定如何修復彈出窗口的位置。請檢查下面的小提琴。當我點擊該按鈕時，該框以某種方式出現在頁面的中間。有沒有辦法讓它出現在我的按鈕下？Javascript彈出框位置

<html lang="en" dir="ltr"> 
<head> 
<style type="text/css"> 
.popup{ 
    position:relative; 
    top:0px; 
    left:0px; 
    margin:0px auto; 
    width:200px; 
    height:150px; 
    font-family:verdana; 
    font-size:13px; 
    padding:10px; 
    background-color:rgb(240,240,240); 
    border:2px solid grey; 
    z-index:100000000000000000; 
    display:none 
    } 

.cancel{ 
    display:relative; 
    cursor:pointer; 
    margin:0; 
    float:right; 
    height:10px; 
    width:14px; 
    padding:0 0 5px 0; 
    background-color:red; 
    text-align:center; 
    font-weight:bold; 
    font-size:11px; 
    color:white; 
    border-radius:3px; 
    z-index:100000000000000000; 
    } 

.cancel:hover{ 
    background:rgb(255,50,50); 
    } 

</style> 
</head> 
<body> 
<button onClick="openPopup();">click here</button> 
<div id="test" class="popup"> 
    This is a test message 
    <div class="cancel" onclick="closePopup();"></div> 
</div> 
</body> 
</html>

和

function openPopup() { 
    document.getElementById('test').style.display = 'block'; 
} 

function closePopup() { 
    document.getElementById('test').style.display = 'none'; 
}

（從javascript onclick create(element) div viz popup box分叉）

謝謝！

來源

2013-02-07 CodeNoob

刪除margin: 0 auto財產。因爲它強制要素居中。

Working Fiddle

來源

2013-02-07 04:21:51

在你的CSS popup使position: absolute;和remove top and left財產讓你popup將成爲

.popup{ 
    position:absolute; 
    margin:0px auto; 
    width:200px; 
    height:150px; 
    font-family:verdana; 
    font-size:13px; 
    padding:10px; 
    background-color:rgb(240,240,240); 
    border:2px solid grey; 
    z-index:100000000000000000; 
    display:none 
    }

其餘全部是精

來源

2013-02-07 04:21:32 asifsid88

Javascript彈出框位置

回答

相關問題