开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 按esc键关闭弹出框

在JavaScript中，按ESC键关闭弹出框是一个常见的需求。以下是实现这一功能的基础概念和相关步骤：

基础概念

事件监听：JavaScript允许你监听键盘事件，如按键按下（keydown）。
事件对象：当事件触发时，会生成一个事件对象，其中包含有关事件的详细信息，如按下的键。
弹出框：通常使用<div>或其他HTML元素来创建一个覆盖在页面上的弹出框。

实现步骤

HTML结构：创建一个弹出框的HTML结构。
CSS样式：设置弹出框的样式，使其看起来像一个弹出窗口。
JavaScript代码：添加事件监听器来检测ESC键的按下，并关闭弹出框。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Close Popup on ESC</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openPopup">Open Popup</button>
    <div id="popup" class="popup">
        <div class="popup-content">
            <span id="closePopup">&times;</span>
            <p>This is a popup!</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    position: relative;
}

#closePopup {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const popup = document.getElementById('popup');
    const openPopupBtn = document.getElementById('openPopup');
    const closePopupBtn = document.getElementById('closePopup');

    openPopupBtn.addEventListener('click', function() {
        popup.style.display = 'flex';
    });

    closePopupBtn.addEventListener('click', function() {
        popup.style.display = 'none';
    });

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            popup.style.display = 'none';
        }
    });
});

优势

用户体验：允许用户通过键盘快捷键快速关闭弹出框，提升交互体验。
无障碍性：支持键盘操作，符合无障碍设计原则。

应用场景

模态对话框：如登录框、确认对话框等。
通知提示：显示重要信息并允许用户快速关闭。

可能遇到的问题及解决方法

弹出框未关闭：
- 原因：事件监听器未正确绑定或事件对象属性使用错误。
- 解决方法：确保event.key正确识别为'Escape'，并检查CSS中弹出框的显示状态是否正确设置。

多个弹出框冲突：
- 原因：多个弹出框共享同一个事件监听器，导致逻辑混乱。
- 解决方法：为每个弹出框单独设置事件监听器，或在事件处理函数中区分不同的弹出框。

通过上述步骤和代码示例，你可以轻松实现按ESC键关闭弹出框的功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结一、JS的三种最常见的对话框 [javascript] view plain copy //====================== JS...最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框...; } //弹出一个询问框，有确定和取消按钮 function firm() { //利用对话框返回的值（true 或者 false） if (confirm...[javascript] view plain copy //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write(“window.close();”); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write(“”); this.Response.Write

17.4K3 0

js中三种弹出框

如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。...，可以利用这些对话框来完成js的输入和输出，实现与用户能进行交互的js代码。...今天小编就来简单介绍一下js中的三种弹出对话框，小编先单独对这几个方法进行详细讲解，接着，将这几个方法进行对比，好了，开始我们的js之旅吧`(*∩_∩*)′…… 第一种：alert()方法 alert...，只需单击该按钮就可以关闭对话框。...单击“确认”或“取消”按钮都是关闭对话框，似乎没有什么区别，实际上，无论是单击“确认”或“取消”按钮都会返回一个布尔值，这样就可以再幕后有一些js代码来发挥按钮的作用，请大家看下面的例子，体会使用confirm

9.7K5 0

JS网页顶部弹出可关闭广告图层

/> 网页特效网页顶部弹出可关闭广告图层站长特效网 #informationbar{ position: fixed;...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。...，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。

9.8K6 0

Vue监听返回键关闭弹出层不返回页面

//监听页面销毁之前 beforeDestroy() { window.removeEventListener( "popstate", ...

3.3K1 0

如何在Vue.js中创建模态框(弹出框)

开篇模态框（弹出层对话框，Modal Popup）在大多数现代应用程序中非常常见。它们主要用于呈现简洁的信息，非常适合显示广告和促销内容。...模态框提供了一种快速传达信息的方式，并提供了用户友好的关闭选项。在本文中，我们将使用Vuejs构建一个弹出模态框。该模态框将包括一个取消或关闭按钮，以方便用户在完成任务后关闭它。...此外，我们还将实现一个功能，允许用户在模态框区域外点击以关闭它。...当按钮被点击时，它会切换isOpened变量的值，从而有效地打开或关闭弹出窗口。导入弹出框组件代码导入了一个弹出组件（Popup.vue）。在模板中，使用v-if条件渲染弹出窗口组件。...这样可以确保弹出窗口在当前组件的DOM层次结构之外渲染，并且可以显示在页面上的其他内容之上。组件之间的通信：当需要关闭弹出组件时，Popup组件会触发一个关闭事件@close。

8242 0

js页面的弹框怎么关闭啊

1、单纯的关闭 window.opener.location.reload(); //刷新父窗口中的网页 window.close();//关闭当前窗窗口 2、提交后关闭 function save()...cmd”).value=”query”; window.opener.document.getElementById(“form的id”).submit();//提交 window.close(); //关闭当前窗口

14.3K4 0

js单击输入框后弹出提示信息效果

http-equiv="Content-Type" content="text/html; charset=gb2312" /> js...,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> js...大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> 单击输入框后给出提示效果，sky整理收集。 js特效，本站收集大量高质量js代码，还有许多广告代码下载。...zzjs.net，站长js特效。 <!

11.1K5 0

vue中点击屏幕其他区域关闭自定义div弹出框

直接上代码： mounted: function () { let that = this; $(document).on('click', f...

2.5K1 0

idea快捷键

Alt + F7 查看该方法/变量/类被调用的地方 Alt + F8 在debug的状态下，选中某些变量或是对象，按此快捷键弹出可输入变量、方法的调试框，指定查看该内容的debug情况 Alt +...Ctrl+b) Ctrl + Alt + V 快速引进一个变量 Ctrl + Alt + F7 寻找被该类或是变量被使用的地方，用弹出框的方式找出来，跟Alt+F7效果一样，但是因为是弹出框，选中了一个位置就会消失...Ctrl + Alt + Enter 光标所在行上空出一行，光标跳上 Ctrl + Alt + home 弹出跟当前文件有关联的文件目录(比如jsp里面有导入几个js和css,这些文件就是关联文件)...Ctrl + Shift + N 通过输入文件名（可以输入部分名称，支持模糊）来定位文件 Ctrl + Shift + F12 编辑器全屏 Ctrl + Shift + F7 高亮显示所有该选中文本，按Esc...run菜单，提供选择性run哪个(这个需要自己尝试下，按后会有弹出框，记得查看) Alt + Shift + F9 弹出debug运行菜单，提供选择性debug哪个(这个需要自己尝试下，按后会有弹出框

2K5 0

phpstorm ctrl+shift+F键不管用，不弹出搜索弹框

般热键冲突搜狗默认简繁切换组合键位ctrl+shift+F故outlook2011按三建且失效应该能看搜狗输入状态简繁变搜狗设置按键-取消选简繁切换热键即在任务栏的语言地方点击一下再点击语言首选项。...进入语言首选项，再点击高级设置高级设置下面点击更改语言栏热键输入语言的热键下面选择在输入语言之门，再点更改按键顺序在这里就可以看到（Ctrl+Shift）快捷键的设置，选择好点确定以后切换的时候使用...还可以为一种输入法专门设置一个快捷键。发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/113798.html原文链接：https://javaforall.cn

5764 0

Win10Win11关闭打开应用时弹出打开文件-安全警告弹框

Win10/Win11关闭打开应用时弹出"打开文件-安全警告"弹框 1.开始菜单搜索internet 选项 2.选择安全-自定义级别 3.勾选启用(不安全) 确认即可，再次打开应用就不会弹出安全警告框了

62.3K2 1

按回车键自动跳到下一个文本框

文本框如下： <input type="text" style="width: 150px" id="text6" onkeydown...changeTab(event,i){ var keyCode = event.keyCode; var inputs = jQuery("#table :input"); // 获取表单中的所有输入框

1.6K0 0

JS实现按下F12审查元素关闭当前页面

只要按下那审查元素、按下F12键，网页就会自动关闭233，可谓杀Bug放火必备佳品！...[只测试了360安全浏览器233，谷歌，火狐貌似不好使] function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location...function ck() { console.profile(); console.profileEnd(); //我们判断一下profiles里面有没有东西，如果有，肯定有人按F12

4.6K3 0

phpstorm IDEA 双击Shift键会弹出 SearchEverywhere 对话框，如何取消这个功能

解决方法：一：Open lib/resources.jar/idea/PlatformActions.xml and remove or comment s...

5951 0

JavaScript——利用正则表达式实现二代身份证号码的验证

HTML 点击，弹出登录框 <div class...move;} #box_close {float: right; cursor: pointer;} JavaScript处理键盘事件 // 获取“点击，弹出登录框...”的链接、登录框的关闭按钮、登录框、页面背景色 var link = document.getElementById("link"); var closeBtn = document.getElementById...= function () { login.style.display = "none"; } // 按下键盘上的ESC键隐藏登录框和遮罩 document.onkeydown...= function (e) { console.log(e.keyCode);//ESC键的键盘码是27 if (e.keyCode === 27) {

4181 0

Sublime Text3 使用教程

插件安装方式二：使用Package Control组件安装：安装Package Control方法1：按Ctrl+`调出console，输入下面代码，按回车就行安装。...Sublime Text 3常用快捷键 1.操作 Ctrl + `：打开Sublime Text控制台（Esc退出） Ctrl+Shift+P：打开命令面板（Esc退出） Ctrl + K, Ctrl...Esc退出弹出窗口） Ctr+p：输入@显示容器（css或者js里面） Ctrl + F：调出搜索框 Ctrl + H：调出替换框进行替换 Ctrl + Shift + H：输入替换内容后，替换当前关键字...6.窗口和Tab页 Ctrl + N：在当前窗口创建一个新标签 Ctrl + Shift + N：创建一个新窗口（该快捷键和搜狗输入法快捷键冲突） Ctrl + W：关闭标签页，如果没有标签页了...，则关闭该窗口 Ctrl+Shift+W：关闭所有打开文件 Ctrl + Shift + T：恢复刚刚关闭的标签。

7.7K2 0

Bootstrap 模态框（Modal）插件的基本应用

模态框（Modal）通俗的说就是在父窗体上弹出的一个子窗体。通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍，可以在不离开父窗体的情况下进行一些互动和内容的交互。...) 实例：注意：因为 Bootstrap.js 需要依赖 jquery 所以需要引入 jquery.js 文件测试代码如下：创建模态框...2、keyboard 属性有 boolean，默认值：true ， data-keyboard 是当按下 esc 键时关闭模态框，设置为 false 时则按键无效。...Modal）标题按下 ESC 按钮退出。...ESC 或者点击屏幕，模态框会关闭。

4.5K0 0

jsonp跨域实现的几种方式

使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值，当然$.getScript也可以实现跨域调用js。...但是总不能把一堆关键字放到前台让用户看，至少得跟百度一样，可以用鼠标和键盘方向键从候选词框里选词吧。...最关键的来了，现在开始写完整的智能提示并配合鼠标和键盘对候选词的操作（源码里的index.html页面），实现如下功能：即时监控字母键和数字键，按下就发ajax请求（也可以设置延迟发请求，源码里有）；...同时监控空格、退格、Delete、Enter等键；鼠标移入弹出层高亮选中的行，点击可上屏；按键盘上下方向键可以选择候选词，回车提交跳转到百度搜索页面；点击页面其他部位自动隐藏弹出框；按ESC键隐藏弹出框...Esc 隐藏弹出层 if ($("#auto").is(":visible")) { $("#auto").hide();

3.4K2 0

sublime Text3使用笔记

js以及jquery等插件安装 ctrl+shif+p掉出命令框，输入pci ,选择install package 过一会会弹出对话框输入：Emmet,选择安装，可以自动提示html css代码。...SetSyntax:javascript.表示当前文本语法为js。...后按ctrl+e,自动生成html首尾，用tab键移动光标。输入ul>.item$*10然后ctrl+e即可生成10行li。其中，>表示子集，.表示class,$表示序号。...Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。就是多行光标同时编辑。Esc退出。举个栗子：快速选中并更改所有相同的变量名、函数名等。...Ctrl+Shift+P 打开命令框。场景栗子：打开命名框，输入关键字，调用sublime text或插件的功能，例如使用package安装插件。 Esc 退出光标多行选择，退出搜索框，命令框等。

1.5K11 0

bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）…

, data : { "type" : "query", "id" : id }, // 成功后开启模态框...function() { alert("请求失败"); }, dataType : "json" }); } // 查询成功后向模态框插入数据并开启模态框...data.useperson); $("#handleperson1").val(data.handleperson); $("#admini1").val(data.admini); // 显示模态框

7.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭