如何使用 Javascript 将交互式模式动态添加到 html

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 调用模态函数。

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

Jquery 选择器必须将模态元素 id 匹配到模态才能显示。而且您不必为每个产品创建模态克隆，您只需更改 modal.This 的内容即可加快页面加载时间。

 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();
});
});

试试这个。

如何使用 Javascript 将交互式模式动态添加到 html

How to add interactive modal dynamically into html with Javascript

html

javascript

bootstrap-modal