jQuery-动态定向模态

时间:2018-09-19 02:40:33

标签: javascript jquery

我希望能够在单击.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>

0 个答案:

没有答案