Question

我有3个模态，我试图在点击上定位，但它会保持打开相同的模态。我不确定如何单独定位每个模态以获得正确的单击开口。这就是我到目前为止所拥有的。我是否正确地认为我需要为每个模态提供其自己的唯一ID，然后通过jquery进行定位，而不是仅仅针对目前使用的主要.modal类。

由于

Tasks.call(new Callable<Void>() {
    @Override
    public Void call() throws Exception {
        allArticles.add(null);
        articleAdapter.notifyItemInserted(allArticles.size() - 1);
        return null;
    }
});

$('.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;
}

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>

Answer 2

另一种方法是将每个模态放在div中，然后使用this关键字找到它的父级，然后查找modal并淡化它。

$('.btn').click(function() {
  $(this).parent().find('.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>
<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>

<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>

<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>
</div>

如何在点击上定位不同的模态

2 个答案: