javascript - 如何在点击时定位不同的模态

Question

我有 3 个模态框，我试图在点击时将其作为目标，但它一直打开同一个模态框。我不确定如何单独定位每个模态以在点击时获得正确的打开。这是我到目前为止所拥有的。我是否正确地认为我需要为每个模式提供其自己的唯一 ID，然后通过 jquery 定位它，而不是仅仅定位我当前使用的主要 .modal 类。

谢谢

$('.btn').click(function() {
  $('.modal').fadeIn();
});

$('.close-btn').click(function() {
  $('.modal').fadeOut();
});

.modal {
  display: none;
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 40px 40px 0 40px;
  border: 1px solid #efefef;
  width: 50%;
}

.modal-header {
  border-bottom: 1px solid #efefef;
}

.modal-body {
  padding: 20px 0;
  border-bottom: 1px solid #efefef;
}

.modal-footer {
  padding: 20px 0;
}

.close-btn {
  width: 150px;
  float: right;
  font-weight: 700;
}

.btn {
  padding: 10px 15px;
  text-align: center;
  color: #fff;
  font-size: 80%;
  letter-spacing: 2px;
  background: #F0B67F;
  cursor: pointer;
  margin-top: 50px;
}

.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">Modal 1</div>
<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h4>Modal 1</h4>
    </div>
    <div class="modal-body">
      <p>modal 1.</p>
    </div>
    <div class="modal-footer clearfix">
      <div class="btn close-btn">CLOSE</div>
    </div>
  </div>
</div>

<div class="btn">Modal 2</div>
<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h4>Modal 2</h4>
    </div>
    <div class="modal-body">
      <p>modal 2.</p>
    </div>
    <div class="modal-footer clearfix">
      <div class="btn close-btn">CLOSE</div>
    </div>
  </div>
</div>

<div class="btn">Modal 3</div>
<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h4>Modal 3</h4>
    </div>
    <div class="modal-body">
      <p>modal 3.</p>
    </div>
    <div class="modal-footer clearfix">
      <div class="btn close-btn">CLOSE</div>
    </div>
  </div>
</div>

Answer 1

问题是 .modal 匹配所有具有类 modal 的元素。您需要将按钮的点击处理函数更改为仅针对您想要淡入的一个模态元素。

我下面的代码展示了一种可行的方法 - 它使用 next() 函数以紧跟在按钮后面的元素为目标。

$('.btn').click(function() {
  $(this).next().fadeIn();
});

$('.close-btn').click(function() {
  $(this).next().fadeOut();
});

.modal {
  display: none;
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 40px 40px 0 40px;
  border: 1px solid #efefef;
  width: 50%;
}

.modal-header {
  border-bottom: 1px solid #efefef;
}

.modal-body {
  padding: 20px 0;
  border-bottom: 1px solid #efefef;
}

.modal-footer {
  padding: 20px 0;
}

.close-btn {
  width: 150px;
  float: right;
  font-weight: 700;
}

.btn {
  padding: 10px 15px;
  text-align: center;
  color: #fff;
  font-size: 80%;
  letter-spacing: 2px;
  background: #F0B67F;
  cursor: pointer;
  margin-top: 50px;
}

.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">Modal 1</div>
<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h4>Modal 1</h4>
    </div>
    <div class="modal-body">
      <p>modal 1.</p>
    </div>
    <div class="modal-footer clearfix">
      <div class="btn close-btn">CLOSE</div>
    </div>
  </div>
</div>

<div class="btn">Modal 2</div>
<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h4>Modal 2</h4>
    </div>
    <div class="modal-body">
      <p>modal 2.</p>
    </div>
    <div class="modal-footer clearfix">
      <div class="btn close-btn">CLOSE</div>
    </div>
  </div>
</div>

<div class="btn">Modal 3</div>
<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h4>Modal 3</h4>
    </div>
    <div class="modal-body">
      <p>modal 3.</p>
    </div>
    <div class="modal-footer clearfix">
      <div class="btn close-btn">CLOSE</div>
    </div>
  </div>
</div>