[英]Javascripts pop-up box position
I am trying to implement a javascript pop-up box, but I am not sure how to fix the position of the pop-up window. 我正在尝试实现一个javascript弹出框,但是我不确定如何确定弹出窗口的位置。 Please check the below fiddle. 请检查以下小提琴。 When I click on the button, the box somehow appears in the middle of the page. 当我单击按钮时,该框会以某种方式出现在页面中间。 Is there a way to make it appears right under my button? 有没有办法让它显示在我的按钮下方?
http://jsfiddle.net/kf9mS/ 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>
and 和
function openPopup() {
document.getElementById('test').style.display = 'block';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
(forked from javascript onclick create(element) div viz popup box ) (由javascript onclick create(element)div viz弹出框派生)
Thanks! 谢谢!
In your CSS popup
make position: absolute;
在CSS popup
position: absolute;
and remove top and left
property so your popup
would become 并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
}
Rest all is fine 休息都很好
Remove margin: 0 auto
property. 删除margin: 0 auto
属性。 Because It is enforcing the element to be in center. 因为它强制元素居中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.