jQuery美化弹出确认对话框遮罩层

最新推荐文章于 2025-05-14 13:39:30 发布

amohan

最新推荐文章于 2025-05-14 13:39:30 发布

阅读量318

点赞数

CC 4.0 BY-SA版权

分类专栏：网站模版文章标签： jquery javascript 前端

原文链接：https://yy123.ink/frontDetail/12346

网站模版专栏收录该内容

3170 篇文章

订阅专栏

该博客介绍了如何使用jQuery创建一个简洁实用的弹出确认信息特效。通过点击事件监听，当用户触发`.cd-popup-trigger`类的元素时，弹窗会显示；点击弹窗外部或弹窗内的关闭按钮时，弹窗将消失；同时，按Esc键也能关闭弹窗。这是一个关于前端用户交互实现的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址

简洁实用的弹出确认信息特效。jQuery(document).ready(function($){ //open popup $(".cd-popup-trigger").on("click", function(event){ event.preventDefault(); $(".cd-popup").addClass("is-visible"); }); //close popup $(".cd-popup").on("click", function(event){ if( $(event.target).is(".cd-popup-close") || $(event.target).is(".cd-popup") ) { event.preventDefault(); $(this).removeClass("is-visible"); } }); //close popup when clicking the esc keyboard button $(document).keyup(function(event){ if(event.which=="27"){ $(".cd-popup").removeClass("is-visible"); } });});