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

最新推荐文章于 2025-10-08 10:21:47 发布

转载最新推荐文章于 2025-10-08 10:21:47 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#jquery #javascript #前端

网站模版专栏收录该内容

3170 篇文章

订阅专栏

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

下载地址

简洁实用的弹出确认信息特效。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"); } });});