クリック時に異なるモーダルをターゲットにする方法

Question

クリックでターゲットにしようとしている3つのモーダルがありますが、同じモーダルを開くようにしています。個々のモーダルを個別にターゲットに設定して、クリック時に適切な1つのオープニングを得る方法を明確にしてはいけません。これは私がこれまで持っていたものです。私はそれぞれのモーダルに固有の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を持つすべての要素と一致していることです。ボタンのクリックハンドラ関数を変更して、フェードインするモーダル要素の1つのみをターゲットにする必要があります。

以下のコードは、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

別のアプローチは、modalを探して、それをフェードイン、その後、その親を見つけるためにthisキーワードを使用し、その後、divの内側に各モーダルを置くことであろう。

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