我正在尝试实现一个 javascript 弹出框，但我不确定如何固定弹出窗口的位置。请检查下面的 fiddle 。当我单击按钮时，该框以某种方式出现在页面中间。有没有办法让它出现在我的按钮下方？
<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 fork )
谢谢!
最佳答案
删除 margin: 0 auto 属性。因为它强制元素居中。
关于Javascript弹出框位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14743437/