创建多模态相同页面

Question

我有一个模式，显示一个移动设备的细节(图片，维修服务海岸，.等)

<button id="myBtn2">Open Modal</button>
<div id="myModal2" class="modal">
  <div class="modal-content">
        <div class="modal-body">
        <div class="left">
        <img src="../Apple-iPhone-X-64GB-Silver-4G-Vodafone-Grade-B.png"/>
        </div>
        <div class="middle">
        <h3 class="Breakge">
            Breakge
            </h3>
            <div class="hyperclicks">
                <p class="click" id="click101" onclick="showhidesector('sector101','click101')">Udskiftning af Skærm</p>
            <p class="click" id="click20" onclick="showhidesector('sector20','click20')">Udskiftning af Batteri</p>
            <p class="click" id="click30" onclick="showhidesector('sector30','click30')">Udskiftning af Bagglas</p>
            </div>
        </div>
        <div class="right" id="right2">
        <h3 class="Prices">
            Prices
            </h3>
            <div class="hyperprices">
                
                <div class="description">
                    Place Description Title Here
                </div>
                <div class="seperateline">
                    
                </div>
                <div class="sector" id="sector101">
                <div class="priceflex">
                    
                    <p>Original Kvalitet </p><p class="priceitem">2499.99,-</p>
                    </div>              
                <div class="priceflex">
            <p>TopKvalitet </p><p class="priceitem">1399.99,-</p>
                    </div>
                    <div class="priceflex">
            <p>KobiKvalitet  </p><p class="priceitem">999.99,-</p>
                    </div>
            </div>
            <div class="sector" id="sector20">
                <div class="priceflex">
                    
                <p>Batteri </p><p class="priceitem">649,99,-</p>
                </div>      
                <div class="priceflex">
            <p>TopKvakitet Batteri </p><p class="priceitem">749.99,-</p>
                </div>
            </div>
            <div class="sector" id="sector30">
                <div class="priceflex">
                <p>Bagglas </p><p class="priceitem">1999.99,-</p>
                </div>
                <div class="priceflex">
            <p>Bagglas og Ramme </p><p class="priceitem">2699.99,-</p>
                </div>
            </div>
            </div>
            <div class="btngroup">
            <div class="rightbtn">
                <input type="button" id="btnClose2" class="btn" value="Close">
            </div>
  </div>
        </div>
</div> 
        <div class="modal-footer">
        
        </div>
    </div>

使用以下js代码弹出模态：

var modal2 = document.getElementById("myModal2");
var btn2 = document.getElementById("myBtn2");
var btnClose2 = document.getElementById("btnClose2");

var divState = {};
function showhidesector(id,id2) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        divState[id] = (divState[id]) ? false : true;
        for (var div in divState){
            if (divState[div] && div != id){ 
                document.getElementById(div).style.display = 'none'; // hide
                divState[div] = false; 
            }
        }
        divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
    }
}
function activatelink(element)
{
    if(document.getElementById(element.id))
        {
            var btnn=document.getElementById(element.id);
            btnn.style.color="red";
}
}

btn2.onclick = function() {
  modal2.style.display = "block";
}

btnClose2.onclick = function() {
  modal2.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal2.style.display = "none";
  }
}

我必须为每个设备创建一个模态，在相同的页面上有大约120个设备。

有一个简单的方法来实现这一点吗?？，或者我必须为元素创建一个唯一的id！

Answer 1

不可能只使用html动态地创建许多元素。相反，您可以使用任何UI库/框架，如react、角或vue。或者您可以使用任何模板语言，比如ejs，或者任何类似它和nodejs/高速公路的语言。