Как я могу открыть определенное модальное диалоговое окно для каждого элемента, по которому щелкнули? ⇐ Jquery

[Anonymous]

Я просто хочу щелкнуть штат и открыть всплывающее окно, соответствующее этому штату.

Код: Выделить всё

$("path, circle").on('click', function(e) {
$('#info-box').css('display', 'block');
$('#info-box').html($(this).data('info'));

$(".close").click(function() {
$('#info-box').hide();
});

$(".close-popup").click(function() {
$('#info-box').hide();
});
});

Код: Выделить всё

  #us-map {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

path:hover,
circle:hover {
stroke: #ffffff !important;
stroke-width: 2px;
stroke-linejoin: round;
fill: #D3D3D3 !important;
cursor: pointer;
}

#path67 {
fill: none !important;
stroke: #A9A9A9 !important;
cursor: default;
}

#info-box {
display: none;
position: fixed;
z-index: 500;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
.popup {
position: fixed;
background-color: #ffffff;
width: 400px;
height: auto;
margin: 0 auto;
padding: 25px;
border: solid 1px #f2f2f2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-popup {
position: absolute;
bottom: 0px;
right: 0px;
font-size: 18px;
background-color: #4bb95a;
padding: 10px 20px;
color: #ffffff;
text-transform: uppercase;
border: 2px solid #ffffff;
transition: 0.3s;
}
.close-popup:hover {
background-color: #ffffff;
color: #4bb95a;
opacity: 1;
border: 2px solid #4bb95a;
}

Код: Выделить всё

Hawaii
Content
Close

Alaska
Content
Close


  

Может быть, мне нужно быть здесь?

Код: Выделить всё

 $(`#info-box${$('.popup').index(this) + 1}`).addClass('visible');

var id = $(this).data('id');
('#'+id).popup('toggle');

Еще раз спасибо.

Подробнее здесь: https://stackoverflow.com/questions/784 ... ed-element