gpt4 book ai didi

Javascript弹出框位置

转载 作者:太空宇宙 更新时间:2023-11-03 18:51:46 25 4
gpt4 key购买 nike

我正在尝试实现一个 javascript 弹出框,但我不确定如何固定弹出窗口的位置。请检查下面的 fiddle 。当我单击按钮时,该框以某种方式出现在页面中间。有没有办法让它出现在我的按钮下方?

http://jsfiddle.net/kf9mS/

<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 属性。因为它强制元素居中。

Working Fiddle

关于Javascript弹出框位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14743437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com