Javascript 单击按钮时不显示模式

尝试在单击按钮时启动模式。我可以单击console.log按钮，但不会显示模式。请帮我找出哪里出了问题。我已经找了一段时间，但不知怎么的，我忽略了错误。多谢各位

完整代码可在此代码笔中找到：

var-app=angular.module'myApp'，[]； 应用程序控制器'myController'， 函数$scope，$http{ $scope.list=[ { ID:001， 名称：欧亚领鸽， 类型：鸽子 }, { ID:002， 名称：秃鹰， 类型：鹰 }, { ID:003， 名称：库珀之鹰， 类型：鹰 }, { ID:004， 名称：贝尔麻雀， 类型：麻雀 }, { ID:005， 名称：哀鸽， 类型：鸽子 }, { ID:006， 名称：岩鸽， 类型：鸽子 }, { ID:007， 名称：阿伯特的托维， 类型：麻雀 }, { ID:008， 名称：布鲁尔麻雀， 类型：麻雀 }, { ID:009， 名称：Canyon Towhee， 类型：麻雀 }, { ID:010， 名称：黑秃鹫， 类型：鹰 }, { ID:011， 名称：欧亚领鸽， 类型：鸽子 }, { ID:012， 名称：秃鹰， 类型：鹰 }, { ID:013， 名称：库珀之鹰， 类型：鹰 }, { ID:014， 名称：贝尔麻雀， 类型：麻雀 }, { ID:015， 名称：哀鸽， 类型：鸽子 }, { ID:016， 名称：岩鸽， 类型：鸽子 }, { ID:017， 名称：阿伯特的托维， 类型：麻雀 }, { ID:018， 名称：布鲁尔麻雀， 类型：麻雀 }, { ID:019， 名称：Canyon Towhee， 类型：麻雀 }, { ID:020， 名称：黑秃鹫， 类型：鹰 }, { ID:021， 名称：欧亚领鸽， 类型：鸽子 }, { ID:022， 名称：秃鹰， 类型：鹰 }, { ID:023， 名称：库珀之鹰， 类型：鹰 }, { ID:024， 名称：贝尔麻雀， 类型：麻雀 }, { ID:025， 名称：哀鸽， 类型：鸽子 }, { ID:026， 名称：岩鸽， 类型：鸽子 }, { ID:027， 名称：阿伯特的托维， 类型：麻雀 }, { ID:028， 名称：布鲁尔麻雀， 类型：麻雀 }, { ID:029， 名称：Canyon Towhee， 类型：麻雀 }, { ID:030， 名称：黑秃鹫， 类型：鹰 } ]; $scope.count=$scope.list.length； $scope.reverseOrder=true； $scope.sortField='ID'； $scope.sortBy=functionsortField{ $scope.reverseOrder=$scope.sortField===sortField？！$scope.reverseOrder:false； $scope.sortField=sortField； }; }; //获取模态 var modal=document.getElementById'myModal'； //获取打开模式对话框的按钮 var btn=document.getElementByIdmyBtn； //获取关闭模态的元素 var span=document.getElementsByClassNameclose[0]； //当用户单击该按钮时，打开模式对话框 btn.onclick=函数{ modal.style.display=块； } //当用户单击x时，关闭模式对话框 span.onclick=函数{ modal.style.display=无； } //当用户单击模式之外的任何位置时，将其关闭 window.onclick=functionevent{ 点击console.log按钮； 如果event.target==模态{ modal.style.display=无； } } 身体{ 保证金：0自动； } a{ 文字装饰：无； } 导航{ 字体系列：monospace； 宽度：100%； 保证金：自动； 显示器：flex； /*证明内容：中心*/ 证明内容：之间的空间； 背景：rgb67、66、66； 对齐项目：居中； } 保险商实验室{ 背景：rgb67、66、66； 列表样式：无； 保证金：0； 左侧填充：0； } 李{ 颜色：fff； 背景：rgb67、66、66； 显示：块； 浮动：左； 填充：1rem； 位置：相对位置； 文字装饰：无； 过渡时间：0.3s； 宽度：70px； } 李阿{ 颜色：fff； } 李:悬停,， 李：关注内部{ 背景：rgb0,0,0； 光标：指针； } 李：集中注意力{ 大纲：无； } ul li ul{ 背景：rgb67、66、66； 可见性：隐藏； 不透明度：0； 最小宽度：5雷姆； 位置：绝对位置； 过渡：所有0.3秒缓解； 页边顶部：1rem； 左：0； 显示：无； } ul li：悬停>ul， ul li：专注于>ul， 悬停， 聚焦{ 能见度：可见； 不透明度：1； 显示：块 } ulli ulli{ 明确：两者皆有； 宽度：100%； } 部分{ 宽度：90%； 保证金：自动； 边缘顶部：50px； 显示：块； 边框：1px纯黑； 最小高度：400px； 最大高度：700px； 溢出：自动； } .章节标题{ 边框底部：1px纯黑； 填充物：5px； 背景色：7C9DB9； } .节标题>div{ 显示：内联块； } .节头div:n-child3{ 颜色：红色； 浮动：对； } .内容{ 填充物：5px； } 公司名称{ 浮动：左； 垂直对齐：中间对齐； } .标志{ 浮动：对； 垂直对齐：中间对齐； } img{ 高度：40px； 垂直对齐：中间对齐； } 页脚{ 字体系列：monospace； 宽度：100%； 保证金：自动； 显示器：flex； /*证明内容：中心*/ 证明内容：之间的空间； 背景：rgb67、66、66； 对齐项目：居中； } tr:nth childeven{background:CCC} tr:nth childodd{背景：FFF} .莫代尔{ 显示：无；/*默认情况下隐藏*/ 位置：固定；/*保持原位*/ z指数：1；/*位于顶部*/ 填充顶部：100px；/*框的位置*/ 左：0； 排名：0； 宽度：100%；/*全宽*/ 高度：100%；/*全高*/ 溢出：自动；/*根据需要启用滚动*/ 背景色：rgb0,0,0；/*回退颜色*/ 背景色：rgba0,0,0,0.4；/*黑色w/不透明度*/ } /*模态内容*/ .模态内容{ 背景色：FEFE； 保证金：自动； 填充：20px； 边框：1px实心888； 宽度：80%； } /*关闭按钮*/ .结束{ 颜色：AAAA； 浮动：对； 字号：28px； 字体大小：粗体； } .关闭：悬停， .结束：聚焦{ 颜色：000； 文字装饰：无； 光标：指针； } 跨度{ 颜色：红色； } 一 二 一 二 三 一 二 计数：{{list.length} 搜索： 身份证件 鸟名 鸟种 编辑 一 二 三 -> &时代； 模态中的一些文本

---

确定首先，编辑按钮位于ng repeat内，这将创建许多按钮，并且所有按钮都具有相同的ID，这是无效的，因为每个元素必须具有唯一的ID

其次，在angulars的上下文中创建的按钮对于getElementById是不可访问的，因为它甚至在呈现按钮之前就执行了。当你们点击按钮时，函数被绑定到窗口，所以它会记录。下面是一个运行良好的示例代码。只需在控制器内创建一个打开模态的函数。下面是一个工作示例

var-app=angular.module'myApp'，[]； 应用程序控制器'myController'， 函数$scope，$http{ $scope.list=[{ ID:001， 名称：欧亚领鸽， 类型：鸽子 }, { ID:002， 名称：秃鹰， 类型：鹰 }, { ID:003， 名称：库珀之鹰， 类型：鹰 }, { ID:004， 名称：贝尔麻雀， 类型：麻雀 }, { ID:005， 名称：哀鸽， 类型：鸽子 }, { ID:006， 名称：岩鸽， 类型：鸽子 }, { ID:007， 名称：阿伯特的托维， 类型：麻雀 }, { ID:008， 名称：布鲁尔麻雀， 类型：麻雀 }, { ID:009， 名称：Canyon Towhee， 类型：麻雀 }, { ID:010， 名称：黑秃鹫， 类型：鹰 }, { ID:011， 名称：欧亚领鸽， 类型：鸽子 }, { ID:012， 名称：秃鹰， 类型：鹰 }, { ID:013， 名称：库珀之鹰， 类型：鹰 }, { ID:014， 名称：贝尔麻雀， 类型：麻雀 }, { ID:015， 名称：哀鸽， 类型：鸽子 }, { ID:016， 名称：岩鸽， 类型：鸽子 }, { ID:017， 名称：阿伯特的托维， 类型：麻雀 }, { ID:018， 名称：布鲁尔麻雀， 类型：麻雀 }, { ID:019， 名称：Canyon Towhee， 类型：麻雀 }, { ID:020， 名称：黑秃鹫， 类型：鹰 }, { ID:021， 名称：欧亚领鸽， 类型：鸽子 }, { ID:022， 名称：秃鹰， 类型：鹰 }, { ID:023， 名称：库珀之鹰， 类型：鹰 }, { ID:024， 名称：贝尔麻雀， 类型：麻雀 }, { ID:025， 名称：哀鸽， 类型：鸽子 }, { ID:026， 名称：岩鸽， 类型：鸽子 }, { ID:027， 名称：阿伯特的托维， 类型：麻雀 }, { ID:028， 名称：布鲁尔麻雀， 类型：麻雀 }, { ID:029， 名称：Canyon Towhee， 类型：麻雀 }, { ID:030， 名称：黑秃鹫， 类型：鹰 } ]; $scope.count=$scope.list.length； $scope.reverseOrder=true； $scope。 sortField='ID'； $scope.sortBy=functionsortField{ $scope.reverseOrder=$scope.sortField===sortField？！$scope.reverseOrder:false； $scope.sortField=sortField； }; $scope.openModal=函数{ 调试器 modal.style.display=块； } }; //获取模态 var modal=document.getElementById'myModal'； //获取关闭模态的元素 var span=document.getElementsByClassNameclose[0]； //当用户单击该按钮时，打开模式对话框 //当用户单击x时，关闭模式对话框 span.onclick=函数{ modal.style.display=无； } //当用户单击模式之外的任何位置时，将其关闭 window.onclick=functionevent{ 点击console.log按钮； 如果event.target==模态{ modal.style.display=无； } } 身体{ 保证金：0自动； } a{ 文字装饰：无； } 导航{ 字体系列：monospace； 宽度：100%； 保证金：自动； 显示器：flex； /*证明内容：中心*/ 证明内容：之间的空间； 背景：rgb67、66、66； 对齐项目：居中； } 保险商实验室{ 背景：rgb67、66、66； 列表样式：无； 保证金：0； 左侧填充：0； } 李{ 颜色：fff； 背景：rgb67、66、66； 显示：块； 浮动：左； 填充：1rem； 位置：相对位置； 文字装饰：无； 过渡时间：0.3s； 宽度：70px； } 李阿{ 颜色：fff； } 李:悬停,， 李：关注内部{ 背景：rgb0，0，0； 光标：指针； } 李：集中注意力{ 大纲：无； } ul li ul{ 背景：rgb67、66、66； 可见性：隐藏； 不透明度：0； 最小宽度：5雷姆； 位置：绝对位置； 过渡：所有0.3秒缓解； 页边顶部：1rem； 左：0； 显示：无； } ul li：悬停>ul， ul li：专注于>ul， 悬停， 聚焦{ 能见度：可见； 不透明度：1； 显示：块 } ulli ulli{ 明确：两者皆有； 宽度：100%； } 部分{ 宽度：90%； 保证金：自动； 边缘顶部：50px； 显示：块； 边框：1px纯黑； 最小高度：400px； 最大高度：700px； 溢出：自动； } .章节标题{ 边框底部：1px纯黑； 填充物：5px； 背景色：7C9DB9； } .节标题>div{ 显示：内联块； } .节头div:n-child3{ 颜色：红色； 浮动：对； } .内容{ 填充物：5px； } 公司名称{ 浮动：左； 垂直对齐：中间对齐； } .标志{ 浮动：对； 垂直对齐：中间对齐； } img{ 高度：40px； 垂直对齐：中间对齐； } 页脚{ 字体系列：monospace； 宽度：100%； 保证金：自动； 显示器：flex； /*证明内容：中心*/ 证明内容：之间的空间； 背景：rgb67、66、66； 对齐项目：居中； } tr：第n个孩子{ 背景：CCC } tr:N奇尔德{ 背景：FFF } .莫代尔{ 显示：无； /*默认情况下隐藏*/ 位置：固定； /*原地不动*/ z指数：1； /*坐在上面*/ 填充顶部：100px； /*盒子的位置*/ 左：0； 排名：0； 宽度：100%； /*全宽*/ 身高：100%； /*全高*/ 溢出：自动； /*如果需要，启用滚动*/ 背景色：rgb0，0，0； /*退色*/ 背景色：rgba0,0,0,0.4； /*黑色w/不透明度*/ } /*模态内容*/ .模态内容{ 背景色：FEFE； 保证金：自动； 填充：20px； 边框：1px实心888； 宽度：80%； } /*关闭按钮*/ .结束{ 颜色：AAAA； 浮动：对； 字号：28px； 字体大小：粗体； } .关闭：悬停， .结束：聚焦{ 颜色：000； 文字装饰：无； 光标：指针； } 跨度{ 颜色：红色； } 一 二 一 二 三 一 二 计数：{{list.length} 搜索： 身份证件 鸟名 鸟种 编辑 一 二 三 -> &时代； 模态中的一些文本

---

感谢您的反馈和代码。你的反馈帮助我更好地理解。