Модальное всплывающее окно не отображается в Foreach Divs, но отображается за пределами DOV ⇐ Jquery

[Anonymous]

Итак, я изучал Asp.net Core и Razor, и это было потрясающе. Я наконец -то создал структуру DIV, связанную с моими данными SQL, и это было довольно круто. Когда я пытаюсь реализовать это в DOV, созданных в @foreach , всплывающее окно не показывает.
Что я делаю не так? Ссылки на библиотеки JQUERY CSS и JS находятся в _layout.cshtml. < /P>
В качестве дополнительного мини-вопроса: как я могу сделать фон темнее, когда показано модальное всплывающее окно? < /P>
@page
@model Products.Pages.IndexModel
@{
}


@foreach (var product in Model.availableProducts)
{



@* *@

@product.ProductName


$@product.Price

}

$("#btnModalPopup").on("click", function () {
$("#modal_dialog").dialog({
title: "jQuery Modal Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});


Modal panel popup



Подробнее здесь: https://stackoverflow.com/questions/796 ... f-the-divs