rufus rufus -4 years ago 95
CSS Question

How to target different modal on click

I have 3 modals that I am trying to target on click but it keeps opening the same one. Im not to sure how to target each modal individually to get the right one opening on click. This is what I have so far. Am I right in thinking that I would need to give each modal its own unique ID and then target that through jquery instead of just targeting the main .modal class Im currently using.

Thanks



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

The problem is that .modal matches every element with the class modal. You need to change your button's click handler function to only target the one modal element you want to fade in.

My code below shows one approach that would work - it targets the element immediately following the button, using the next() function.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download