открытое разное содержимое в всплывающем окне

Question

Этот код работает и все, но обе ссылки открывают ту же информацию, что и информация link2 `

POP2

,. Если я удалю вторую ссылку, первая откроется без проблем. Что мне не хватает?

HTML

 
    $(document).ready(function(){ 
 
    
 
     $('.open').click(function() { 
 
     $('.pop_background').fadeIn(); 
 
     $('.pop_box').fadeIn(); 
 
     return false; 
 
     }); 
 
     $('.close').click(function() { 
 
     $('.pop_background').fadeOut(); 
 
     $('.pop_box').fadeOut(); 
 
     return false; 
 
    
 
     }); 
 
    
 
     $('.pop_background').click(function(){ 
 
     $('.pop_background').fadeOut(); 
 
     $('.pop_box').fadeOut(); 
 
     return false; 
 
     }); 
 
    }); 
 
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="responsive1"> 
 
    <div class="pop_background"></div> 
 
    <div class="pop_box"> 
 
     <h1>POP1</h1> 
 
     <span class="close">&times;</span> 
 
    </div> 
 
     <div class="img"> 
 
     <a class="open" href="#"> 
 
      click to open pop 
 
     </a> 
 
     
 
     </div> 
 
    </div> 
 
    <div class="responsive1"> 
 
    <div class="pop_background"></div> 
 
    <div class="pop_box"> 
 
     <h1>POP2</h1> 
 
     <span class="close">&times;</span> 
 
    </div> 
 
     <div class="img"> 
 
     <a class="open" href="#"> 
 
      click to open pop2 
 
     </a> 
 
     
 
     </div> 
 
    </div>

Answer 1

Все коды ссылаются на один и тот же объект. Вы должны присваивать идентификаторы каждому из них.

Обновление: Я создал функцию javascript, чтобы принимать параметры, которые являются идентификатором контейнера, поэтому вы можете вызвать его один раз. Ее в нижней части этого ответа

HTML

<div id="pb1" class="pop_box"> 
    <h1>POP1</h1> 
    <span class="close">&times;</span> 
</div> 
    <div class="img"> 
    <a id="openpb1" class="open" href="#"> 
     click to open pop1 
    </a> 

<div id="pb2" class="pop_box"> 
    <h1>POP2</h1> 
    <span class="close">&times;</span> 
</div> 
    <div class="img"> 
    <a id="openpb2" class="open" href="#"> 
     click to open pop2 
    </a> 
    </div> 
</div> 

JAVASCRIPT

Повторите код POP2

<script>  
$(document).ready(function(){ 
    $('#openpb1').click(function() { 
    $('#pb1').fadeIn(); 
    $('.pop_box').fadeIn(); 
    return false; 
    }); 
    $('#pb1 .close').click(function() { 
    $('#pb1').fadeOut(); 
    $('#pb1').fadeOut(); 
    return false; 

    }); 

    $('.pop_background').click(function(){ 
    $('.pop_background').fadeOut(); 
    $('.pop_box').fadeOut(); 
    return false; 
    }); 
}); 
</script> 

Используя его как функцию

<script>  
    function myPopup(container){ 
     $(container).fadeIn(); 
     $('.pop_box').fadeIn(); 
     return false; 
    } 

$('#openpb1').click(function() { 
myPopup('#pb1'); 
}); 

$('#openpb2').click(function() { 
myPopup('#pb2'); 
});  
</script> 

Answer 2

Для меня это выглядит как будто вы только написали JavaScript для первого всплывающего окна? Вы не говорите, что всплывающее окно должно открыться.