如何在div的中心放置弹出消息？
[英]How to place a popup message in center of the div?
问题描述
我有一个div块，我将根据以下计算来计算其宽度和偏移高度。 现在，我试图将消息保存器块放置在div块之间。
我的目的是在div“ oID_1”的中心显示消息“ popup”块。 有谁能够帮助我？
<BODY>
<head>
<script>
function msgBox(message) {
var msgbox = document.getElementById("msgbox");
msgbox.innerHTML = message;
var x = (window.innerWidth / 2) - (msgbox.offsetWidth / 2);
var y = (window.offsetHeight / 2) - (msgbox.offsetHeight / 2);
msgbox.style.top = y;
msgbox.style.left = x;
msgbox.style.display = "block";
}
</script>
<style type="text/css">
.popup {
width:100px;
height:100px;
position:absolute;
display:none;
border:1px solid green;
}
</style>
<script type="text/javascript">
function showPopup(id) {
var popup = document.getElementById(id);
var divblock=document.getElementById('oID_1');
width=parseInt(oID_1.style.width);
var x = (width / 2) - (popup.offsetWidth / 2);
var y = (divblock.offsetHeight / 2) - (popup.offsetHeight / 2);
popup.style.top = y;
popup.style.left = x;
popup.style.display = "block";
}
</script>
</head>
<DIV CLASS="body">
<center>
<div id="popup" class="popup">
This a vertically and horizontally centered popup.
</div>
<a onclick="showPopup('popup');">Show Popup</a>
<DIV ID="oID_1" STYLE=" width:300; height:300;border:1px solid red">
</DIV>
</center>
</DIV>
</BODY>
3 个解决方案
解决方案1
1 2012-07-26 09:13:53
如果您的元素是绝对定位的并且知道它的宽度，则可以始终使用left：50％; 左边距：-（半宽）px
解决方案2
0 2012-07-26 09:10:12
可以使用jQuery吗？ 看看带有jQuery的center-div-with
解决方案3
0 2012-07-26 10:02:32
看一下以下网站： http : //bushraaadit.appspot.com/
现在，他们将div居中的方式非常简单。 首先，我们来看一下HTML结构：
<div id="container">
<div id="wrapper">
<div id="center"></div>
</div>
</div>
好的，我们有三个嵌套的div。 第一个（ container ）是要在其中居中的第三个div（ center ）的div。 第二个div（ wrapper ）用于帮助居中。 可以将其视为水平和垂直居中的中心标签。
现在是CSS（是的，它仅可在CSS上工作，并在调整container div的大小时自动重新居中）。 给container div任意宽度和高度。 现在是wrapper和center div。
wrapper div的宽度和高度必须与center div相同。 如果center的div需要明确的宽度和高度（比如所述容器的50％）然后将其设置在wrapper并设置的宽度和高度center为100％（这是容器的50％100％）。 否则，使wrapper向左浮动（这样做会自动将其缩小到center div的大小）。
最后使其居中，我们首先设置的位置wrapper和center相对。 然后将wrapper div从其所在位置（容器的50％）向右和向下50％定位。 然后将center div从其所在位置的左侧和顶部定位50％（ wrapper的50％本身就是其50％）。
生成的CSS类似于：
html, body, #container {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#container {
background-color: #FFF0F5;
}
#wrapper {
height: 50%;
left: 50%;
position: relative;
top: 50%;
width: 50%;
}
#center {
background-color: #FFE4E1;
bottom: 50%;
height: 100%;
position: relative;
right: 50%;
width: 100%;
}
最终结果可以在以下小提琴中看到： http : //jsfiddle.net/a3kVj/
希望能有所帮助。
如何解决弹出中心屏幕Div类？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.