如何在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.