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

简介: 详解用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 按钮时,它将隐藏弹框。


目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
|
16天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
1月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
1月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
19 2
|
1月前
|
JavaScript 前端开发 API
|
1月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
21 1
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
1月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
29 1
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
20 5
|
1月前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
29 0
下一篇
无影云桌面