我希望能够在单击.popup
按钮时在每个.item
内显示.open
,但是在弹出窗口始终显示的意义上,我需要使其具有方向性视图内部(在.container
的边界内)。
您会看到我希望它的结构:始终在右侧显示弹出窗口,除非弹出窗口超出范围,然后在左侧显示。
我将如何构造脚本来处理弹出窗口相对于容器边界(最右边的项目)的位置?
.container {
border: 1px solid;
display: flex;
overflow-y: auto;
}
.item {
flex: 1;
margin: 20px;
float: left;
display: flex;
position: relative;
width: 75px;
height: 100px;
background: silver;
}
.open {
float: right;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid;
height: 30px;
cursor: pointer;
background-color: white;
}
.popup {
display: none;
position: absolute;
right: 0;
width: 25px;
height: 50px;
}
.popup .content {
background-color: #e8f0f3;
border: 1px solid #ffffff;
position: absolute;
z-index: 999;
left: 50%;
margin-left: -171px;
padding: 20px;
overflow: hidden;
}
<div class="container">
Show Right
<div class="item">
<div class="open">+</div>
<div class="popup">
<div class="content">
<h1>Modal1</h1>
</div>
</div>
</div>
Show Right
<div class="item">
<div class="open">+</div>
<div class="popup">
<div class="content">
<h1>Modal2</h1>
</div>
</div>
</div>
Show Left
<div class="item">
<div class="open">+</div>
<div class="popup">
<div class="content">
<h1>Modal3</h1>
</div>
</div>
</div>
</div>