山西建设行政主管部门官方网站,中国海峡建设公司官网,竞赛网站开发,装修设计方案范本jquery CSS3遮罩弹出层动画效果#xff0c;使用非常简单#xff0c;就两个标签#xff0c;里面自定义内容和样式#xff0c;四种常见效果#xff0c;懂的朋友还可以修改源代码修改成自己想要的效果效果展示 http://hovertree.com/texiao/jquery/85/代码如下#xff1a; 使用非常简单就两个标签里面自定义内容和样式四种常见效果懂的朋友还可以修改源代码修改成自己想要的效果 效果展示 http://hovertree.com/texiao/jquery/85/代码如下 !DOCTYPE HTML
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1 /titleJQuery-CSS3制作简洁的弹框_何问起/titlescript typetext/javascript srchttp://down.hovertree.com/jquery/jquery-1.7.2.min.js/scriptlink relstylesheet hrefhttp://hovertree.com/texiao/jquery/85/style.cssstyle.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}/style
/headbodydiv classhovertreeinfoh2jquery CSS3制作简洁遮罩弹出层动画/h2几种常见的简洁弹框/divdiv classcheckboxa hrefjavascript:0; classcd-popup-trigger0样式1/aa hrefjavascript:0; classcd-popup-trigger1样式2/aa hrefjavascript:0; classcd-popup-trigger2样式3/aa hrefjavascript:0; classcd-popup-trigger3样式4/a/div!--弹框--div classcd-popupdiv classcd-popup-containerp何问起/pdiv classcd-buttons1 自定义整体容器宽高度及内容高度可自适应可固定,样式可以定义自己喜欢的样式这里就不做美观了/diva hrefjavascript:; classcd-popup-closeclose/a/div/divdiv classcd-popup1div classcd-popup-container1p何问起/pdiv classcd-buttons2 自定义整体容器宽高度及内容高度可自适应可固定,样式可以定义自己喜欢的样式这里就不做美观了,更多特效a hrefhttp://hovertree.com/texiao/ target_blankhttp://hovertree.com/texiao//a/diva hrefjavascript:; classcd-popup-closeclose/a/div/divdiv classcd-popup2div classcd-popup-container2p何问起/pdiv classcd-buttons3 自定义整体容器宽高度及内容高度可自适应可固定,样式可以定义自己喜欢的样式这里就不做美观了/diva hrefjavascript:; classcd-popup-closeclose/a/div/divdiv classcd-popup3div classcd-popup-container3p何问起/pdiv classcd-buttons4 自定义整体容器宽高度及内容高度可自适应可固定,样式可以定义自己喜欢的样式这里就不做美观了/diva hrefjavascript:; classcd-popup-closeclose/a/div/divdiv classhovertreeinfoa hrefhttp://hovertree.com target_blank何问起/a
a hrefhttp://hovertree.com/menu/texiao/ target_blank网页特效/a
a hrefhttp://hovertree.com/h/bjaf/0ai05muy.htm target_blank代码说明/a/divscript typetext/javascript/*弹框JS内容*/jQuery(document).ready(function($){//打开窗口$(.cd-popup-trigger0).on(click, function(event){event.preventDefault();$(.cd-popup).addClass(is-visible);//$(.dialog-addquxiao).hide()});//关闭窗口$(.cd-popup).on(click, function(event){if( $(event.target).is(.cd-popup-close) || $(event.target).is(.cd-popup) ) {event.preventDefault();$(this).removeClass(is-visible);}});//ESC关闭$(document).keyup(function(event){if(event.which27){$(.cd-popup).removeClass(is-visible);}});//打开窗口$(.cd-popup-trigger1).on(click, function(event){event.preventDefault();$(.cd-popup1).addClass(is-visible1);//$(.dialog-addquxiao).hide()});//关闭窗口$(.cd-popup1).on(click, function(event){if( $(event.target).is(.cd-popup-close) || $(event.target).is(.cd-popup1) ) {event.preventDefault();$(this).removeClass(is-visible1);}});//ESC关闭$(document).keyup(function(event){if(event.which27){$(.cd-popup1).removeClass(is-visible1);}});//打开窗口 by 何问起$(.cd-popup-trigger2).on(click, function(event){event.preventDefault();$(.cd-popup2).addClass(is-visible2);//$(.dialog-addquxiao).hide()});//关闭窗口$(.cd-popup2).on(click, function(event){if( $(event.target).is(.cd-popup-close) || $(event.target).is(.cd-popup2) ) {event.preventDefault();$(this).removeClass(is-visible2);}});//ESC关闭$(document).keyup(function(event){if(event.which27){$(.cd-popup2).removeClass(is-visible2);}});//打开窗口$(.cd-popup-trigger3).on(click, function(event){event.preventDefault();$(.cd-popup3).addClass(is-visible3);//$(.dialog-addquxiao).hide()});//关闭窗口$(.cd-popup3).on(click, function(event){if( $(event.target).is(.cd-popup-close) || $(event.target).is(.cd-popup3) ) {event.preventDefault();$(this).removeClass(is-visible3);}});//ESC关闭$(document).keyup(function(event){if(event.which27){$(.cd-popup3).removeClass(is-visible3);}});});/script
/body
/html 转自http://hovertree.com/h/bjaf/0ai05muy.htm 更多http://www.cnblogs.com/jihua/p/webfront.html转载于:https://www.cnblogs.com/jihua/p/jquerytsk.html
