如何在div的中心放置一個彈出消息？

我有一個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>

來源

2012-07-26 Kunal Vashist

爲什麼你的身體內有頭標籤？ – 2012-07-26 09:14:56

在現在什麼div的中心，「oID_1」元素沒有位置，只有2px高，期望在該元素中居中放置元素？那些'

'標籤不應該被使用，而且你的頭在你的身體內。您需要回到基礎知識，並首先學習基本的HTML和CSS。 – adeneo 2012-07-26 09:15:16

@AaditMShah你的sol不會幫助...你會停止詢問有關接受 – 2012-08-06 11:43:36

你可以使用jQuery嗎？看看center-div-with-jquery

來源

2012-07-26 09:10:12

是的，我可以做.... – 2012-07-26 09:12:53

我不想中心的div我想彈出的消息被集中在div中 – 2012-07-26 09:16:49

中心窗口內或DIV內幾乎是相同的。背後的理論概念是相同的。 – 2012-08-03 16:33:00

如果你的元素是絕對定位，你知道它的寬度，你可以隨時使用左：50％;保證金左： - （半寬）像素

來源

2012-07-26 09:13:53 simoncereska

我甚至試圖在CSS添加頂部：50％;左：50％;但是這也不會幫助我的案例 – 2012-07-26 09:16:03

將#popup放到＃oID_1中，如果您需要在此div中顯示 – simoncereska 2012-07-26 09:18:05

沒有任何更改 – 2012-07-26 09:20:45

看看以下網站：http://bushraaadit.appspot.com/

現在，他們都集中在div的方式很簡單。首先我們來看看HTML結構：

<div id="container"> 
    <div id="wrapper"> 
     <div id="center"></div> 
    </div> 
</div>

好吧，我們有三個嵌套的div。第一個（container）是您想要將第三個div居中的div（center）。第二個div（wrapper）用於幫助居中。把它看作是水平和垂直居中的中心標籤。

現在爲CSS（是的，它純粹在CSS上工作，並調整container div的大小時自動重新中心）。給你想要的任何寬度和高度的container div。現在爲wrapper和center divs。

wrapper div 必須有與center div相同的寬度和高度。如果center div需要明確的寬度和高度（例如容器的50％），則將其設置在wrapper上，並將center的寬度和高度設置爲100％（這是容器50％的100％）。否則，使wrapper浮動到左邊（這樣做會自動縮小到center格的大小）。

最後以居中它我們首先將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/

希望有所幫助。

來源

2012-07-26 10:02:32

如何在div的中心放置一個彈出消息？

回答

相關問題