主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
js实现提醒窗口，点击空白消失
2022-03-03
网页编程网
网页编程网
如同百度地图（显示位置可调），放入鼠标时提示内容，点击其他空白，显示消失。也可用于列表项，显示详细内容。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>列表与详细页统一显示</title> <head> <style> #view{ position:fixed; bottom: 0; left: 0; width:100%; height:30%; display:none; background-color:pink; } table{ border: 1px solid #ccc; border-collapse: collapse; width:100%; } table th,table td{ border: 1px solid #ccc; padding:8px;} td{border:solid #000 1px;} table tr:nth-child(even){ background:#E0FFFF; } table th{ position: sticky; top: 0; background: white; } </style> </head> <body> <h3>入库</h3> <table> <tr><th>ID</th><th>入库号</th></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> <tr><td>1</td><td><a href="#" onmouseover="mouseover()">test</a></td></tr> </table> <div id="view">详细内容显示部分</div> <script> let div = document.getElementById("view");//获取到div的id //第一步：鼠标移上去显示div function mouseover() { div.style.display = "block" } //第二步：点击空白处div消失 document.onclick = function () { div.style.display = "none"; } //第三步：点击自身div不消失 div.onclick = function (e) { e.stopPropagation();//阻止事件冒泡 } </script> </body></html>
阅读原文
阅读
2865
123
显示电脑版