以下是一个简单的JavaScript弹框列表功能的实现方法:
在 HTML 中,创建一个按钮和一个空的 div,用于显示列表。
<button onclick="showList()">Show List</button> <div id="list"></div>
在 JavaScript 中,创建一个数组以保存列表项。然后创建一个函数,该函数会将列表项添加到数组中,并创建列表的 HTML 代码。最后,将 HTML 代码添加到列表 div 中。
var items = []; function showList() { var item = prompt("Please enter an item for the list:"); if (item) { items.push(item); } var html = "<ul>"; for (var i = 0; i < items.length; i++) { html += "<li>" + items[i] + "</li>"; } html += "</ul>"; document.getElementById("list").innerHTML = html; }
该函数会提示用户输入一个列表项。如果用户输入了一个项,该项将添加到数组中。接下来,它将使用 for 循环创建一个带有所有列表项的 HTML 列表。最后,它将将这个 HTML 添加到列表 div 中。
您还可以使用 CSS 美化列表样式,例如:
#list { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } #list.show { display: block; }
在这个示例中,我们通过设置“显示”类的样式来显示列表。在 showList 函数中,您可以添加以下代码行以显示和隐藏列表:
var listDiv = document.getElementById("list"); listDiv.classList.toggle("show");
现在,当用户单击 Show List 按钮时,它将显示一个弹框,并提示用户添加列表项。然后,他将在弹框中显示所有项。当用户再次单击 Show List 按钮时,它将隐藏弹框。