如何使用 Javascript 制作动态 html 弹出窗口？

Question

我正在为餐厅的数字菜单做一个学校项目。到目前为止我所做的是这个弹出窗口：

它在按下按钮时显示，我还添加了一个 'X' 图标来关闭它。问题是它是静态的，这就是我将它存储在 index.html 文件中的方式：

<div class="menu">
<h2>Our Menu</h2>
<ul>
     <li>
         <label>
             <input type="checkbox" name="">
             <span class="icon"></span>
             <span class="list">Fried Fish With Souce</span>
         </label>
     </li>
</ul>
</div>

如您所见，数据以静态方式存储，问题是我必须为很多其他类别设置 Pop-UPS。一种解决方案是使用 Javascript 创建弹出窗口：

function showMenu()
{
    const storedMenu = [{name: "Fried Fish With Souce", checked: false}, {name:"anotherName", checked: false}];
        var content=`<div class="menu"><h2>Our Menu</h2><a href="javascript:closeMenu()" class="close-icon"></a>`;
 
        storedMenu.reduce((accumulator, currentItem) => {
        accumulator += `<ul><li><label> 
        <input type="checkbox" name="">
        <span class="icon"></span>
        <span class="list">${currentItem.name}</span>
        </label><li><ul>`;content+=accumulator;
        }, '' );
            content+="</div>";
            document.write(content);
}

这是上面源代码的输出：

问题是 document.write 似乎创建了一个全新的页面，因此 CSS 没有得到应用，它覆盖了 index.html！我的问题是，在这种情况下如何使用 Javascript 创建动态弹出窗口但保留 CSS，并且弹出窗口应该简单地出现在 index.html 之上，但是应该还是提前visible.Thanks！

Answer 1

document.write 仅在页面呈现期间有效。如果您想要动态列表，请使用（示例）

<div id="docwrite"></div>

<script>
var str = "<ul><li>abc</li><li>klm</li><li>xyz</li></ul>";
document.querySelector("#docwrite").innerHTML = str;
</script>

如何使用 Javascript 制作动态 html 弹出窗口？

How to make dynamic html Pop-UP using Javascript?

html

javascript

css

popup