如何將交互式模態動態添加到 html 和 Javascript

Question

let http = new XMLHttpRequest();

http.open('get', 'recipe.json', true);

http.send();



http.onload = function () {

if (this.readyState == 4 && this.status == 200) {

    let products = JSON.parse(this.responseText);


    let output = "";


    for (let item of products) {
        output += `

            <div class="product">
                <img src="${item.imageURL}" alt="${item.imageURL}">
                <p class="title">${item.name}</p>
                </p>
                <button type="button" name="${item.name}" class="btn btn-primary modaltrigger" id="btn${item.name}" data-bs-toggle="modal" data-bs-target="#${item.name}">
                Get Recipe
                </button>
            </div>
            <div class="modal fade" id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        ${item.data}
                    </div>
                </div>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>              
        `;

    }

    document.querySelector(".products").innerHTML = output;
}
}

$(document).ready(function () {
    $(".modaltrigger").click(function () {
    var id = $(this).attr('name');
    $('#' + id).modal();
});
});

我想在 javascript 的幫助下為我的 json 文件中的所有產品制作一個動態模態。當我點擊“獲取食譜”按鈕時，模態不會彈出並且我收到錯誤消息“ARIA 隱藏元素不能包含可聚焦元素“在開發工具中。

Answer 1

您沒有使用模態 ID 調用模態 function。

$("#myModal").modal();

Jquery 選擇器必須將模態元素 id 匹配到模態才能顯示。 而且您不必為每個產品創建模態克隆，您只需更改模態的內容即可。這將加快頁面加載時間。

 let http = new XMLHttpRequest();

http.open('get', 'recipe.json', true);

http.send();



http.onload = function () {

if (this.readyState == 4 && this.status == 200) {

    let products = JSON.parse(this.responseText);


    let output = "";


    for (let item of products) {
        output += `
            <div class="product">
                <img src="${item.imageURL}" alt="${item.imageURL}">
                <p class="title">${item.name}</p>
                </p>
                <button type="button" name="${item.name}" class="btn btn-primary modaltrigger" data-bs-toggle="modal" data-bs-target="#${item.name}">
                Get Recipe
                </button>
            </div>
            <div class="modal fade" id="${item.name}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    </div>
                    <div class="modal-body">
                        ${item.data}
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                </div>
            </div>              
        `;
    }

    document.querySelector(".products").innerHTML = output;
}
}

$(document).ready(function () {
    $(".modaltrigger").click(function () {
    var id = $(this).attr('name');
    $('#'+id).modal();
});
});

嘗試這個。