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弹出框位置

回答

相关问题