Javascript JS中数组循环中的模态

我正在做我的电子商务项目。这里有件事我正努力想弄明白。。。 [1]: 请参阅所附图片-如果单击I图标>应打开一个模式，则我希望

剪接码

const products = [
    {
        id: 1,
        title: 'Pens',
        img: '/assets/images/Stationery Items/d-pens.jpg',
        description: 'Pens',
        rate: 4.2,
    },
    {
        id: 2,
        title: 'Notebooks',
        img: '/assets/images/Stationery Items/d-notebooks.jpg',
        description: 'Notebooks',
        rate: 3.4,
    },
  {...}
  ]


function showProduct(product) {
    return `
        
            <div class="box-wrap border">
                <img src="${product.img}" class="rounded d-block">
                <div class="body">
                    <h5>${product.title}</h5>
                    <div class="d-flex justify-content-between">
                        <a href="#"><i class="fas fa-star"></i></a>
                        <a href="#"><i class="fas fa-info"></i></a>
                    </div>  
                </div>
            </div>
            
            
        
        `
}

function productList() {
    document.getElementById('products').innerHTML = `
            <div class="owl-carousel">
                ${products.map(showProduct).join('')}
            </div>
        `
}

const产品=[
{
id:1，
标题:"笔",，
img:“/assets/images/信纸项目/d-pens.jpg”，
描述：'笔'，
比率：4.2，
},
{
id:2，
标题：“笔记本”，
img:“/assets/images/文具项目/d-notebooks.jpg”，
说明：'笔记本'，
比率：3.4，
},
{...}
]
功能展示产品（产品）{
返回`
${product.title}
`
}
函数productList（）{
document.getElementById（'products'）。innerHTML=`
${products.map（showProduct.join（“”）}
`
}

您可以将引导与模式一起使用：

const产品=[
{
id:1，
标题:"笔",，
img:“/assets/images/信纸项目/d-pens.jpg”，
描述：'笔'，
比率：4.2，
},
{
id:2，
标题：“笔记本”，
img:“/assets/images/文具项目/d-notebooks.jpg”，
说明：'笔记本'，
比率：3.4，
},
];
products.map（（v，k）=>{
$（“#滑块”）.append（“”+v.title+“”）
})
$（文档）.on（'click'，'button.openmodel'，函数（）{
var productKey=$（this.data（'key'）；
var产品=产品[productKey]；
if（产品）{
$（'exampleModal'）.modal（'toggle'）；
$（'#exampleModal#exampleModalLabel'）.html（product.title）；
变量内容='标题：'+product.Title+'说明：'+product.Description+'费率：'+product.Rate+''；
$（'#exampleModal.modal body'）.html（内容）；
}
})

情态标题
&时代；
接近
保存更改

您的模式代码在哪里？你应该使用一些react模式插件。这些问题是相关的吗？（）添加模式代码。如果你还没有创建模态，看看这个，我想在没有任何框架的情况下使用vanilla js。让我用模态代码更新帖子