如上圖所示，我需要將 DIV 放在單擊的按鈕的角上。此按鈕可以是頁面上的任何位置，但單擊它時會打開一個 div，我想設定位置，以便它像影像中一樣在其角落打開 div。
我想打開的 div 將在包含按鈕的 div 之外。
function openPopup() {
document.getElementById('test').style.display = 'contents';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}.popup-div {
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
display: none;
}
.popup {
position: absolute;
top: 0px;
left: 0px;
margin: 100px 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);
}<div id="test" class=" popup-div">
This is a test message
<div class="cancel" onclick="closePopup();"></div>
</div>
<button onClick="openPopup();">BUTTON</button>uj5u.com熱心網友回復：
html：
<div class="container">
<button>Button</button>
<div id="popup"></div>
</div>
css：
.cont {
position: relative;
}
#popup {
position: absolute;
top: /* insert button height (incl. padding) here */
}
uj5u.com熱心網友回復：
.container {
border: 2px solid red;
}
#popup {
display: none;
position: absolute;
top: 10px;
right: 15px;
height: 85%;
width: 40%;
background: red;
font-size: 55px;
color: #fff;
text-align: center;
}
h1 {}
.clsbtn {
margin-left: 80%;
}<br> <br> <br> <br> <br> <br>
<div class="container">
<br> <br> <br>
<button onclick="document.getElementById('popup').style.display='block'">Button</button>
<div id="popup">
<span onclick="document.getElementById('popup').style.display='none'" class="clsbtn">×</span>
<h1> div </h1>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/383572.html
標籤：javascript html css