大家好，又见面了，我是你们的朋友全栈君。
HTML
<div class="login-header"><a id="link">点击，弹出登录框</a></div>
<div class="box" id="box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close">[关闭]</span>
</div>
<div class="bd"></div>
</div>CSS样式
<style>
.login-header { width: 100%;text-align: center;height: 30px; font-size: 24px;line-height: 30px;}
* {margin: 0;padding: 0;}
.box { width: 400px; height: 300px;border: 5px solid #eee;box-shadow: 2px 2px 2px 2px #666;position: absolute;top: 15%;left: 30%;display: none;}
.hd { width: 100%; height: 25px; background-color: #7c9299; border-bottom: 1px solid #369; line-height: 25px; color: white;cursor: move;}
#box_close {float: right; cursor: pointer;}
</style>JavaScript处理键盘事件
<script>
// 获取“点击，弹出登录框”的链接、登录框的关闭按钮、登录框、页面背景色
var link = document.getElementById("link");
var closeBtn = document.getElementById("box_close");
var login = document.getElementById("box");
// 点击登录 显示登录框和遮罩
link.onclick = function () {
login.style.display = "block";
}
// 点击关闭按钮 隐藏登录框和遮罩
closeBtn.onclick = function () {
login.style.display = "none";
}
// 按下键盘上的ESC键 隐藏登录框和遮罩
document.onkeydown = function (e) {
console.log(e.keyCode);//ESC键的键盘码是27
if (e.keyCode === 27) {
closeBtn.onclick();
}
}
</script>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/153635.html原文链接：https://javaforall.net
