固定位置的彈出窗口的CSS關閉按鈕

Question

我想創建一個由JQuery觸發的彈出窗口並使用CSS進行樣式化。我在框的右上角添加了一個關閉按鈕，但是當您在框內向下滾動時（溢出：滾動，由於框的最大高度），X關閉按鈕也會滾動，即使定義了絕對位置：

.team-name-popup{ 
position:fixed; 
z-index: 9; 
top:10%; 
left:50%; 
margin-left:-350px; 
width:700px; 
height:auto; 
max-height:400px; 
background:rgba(0,0,0,0.9); 
overflow:scroll; 
} 
.team-name-popup-inner{ 
position:relative; 
width:100%; 
height:auto; 
max-height: 100%; 
padding: 50px; 
overflow:scroll; 
} 
.team-popup-close{ 
position:absolute; 
z-index:999; 
top:5px; 
right:10px; 
color:#fff; 
} 

HTML

<div class="team-name-popup"> 
<a href="#" class="team-popup-close">&times;</a> 
<div class="team-name-popup-inner"> 
<h5 class="team-name">Name</h5> 
Text here 
</div><!--team popup inner--> 
</div><!--team popup--> 

我試圖改變溢出，但隨後滾動不起作用：

.team-name-popup{ 
.... 
overflow:hidden; 
} 
.team-name-popup-inner{ 
.... 
overflow:scroll; 
} 

默認

滾動

Answer 1

請檢查該解決方案。

.team-name-popup{ 
position:fixed; 
z-index: 9; 
top:10%; 
left:50%; 
margin-left:-350px; 
width:700px; 
height: 400px; 
max-height:400px; 
background:rgba(0,0,0,0.9); 
overflow:scroll; 
} 
.team-name-popup-inner{ 
position: absolute; 
width:100%; 
height: 400px; 
padding: 50px; 
overflow:scroll; 
} 
.team-popup-close{ 
position:absolute; 
z-index:999; 
top:5px; 
right:10px; 
color:#fff; 
}