详解用js实现弹框列表功能

以下是一个简单的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 按钮时，它将隐藏弹框。