基于jQuery实现弹出可关闭遮罩提示框实例代码

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：976 次日期：2016-07-26 16:20:11

温馨提示：小编为您整理了“基于jQuery实现弹出可关闭遮罩提示框实例代码”,方便广大网友查阅！

jquery CSS3遮罩弹出层动画效果，使用非常简单，就两个标签，里面自定义内容和样式，四种常见效果，懂的朋友还可以修改源代码修改成自己想要的效果

关键代码如下所示：

<!DOCTYPE HTML>

<html>

<head>

<title>JQuery-CSS3制作简洁的弹框_何问起</title>

</head>

<body>

<div class="hovertreeinfo"><h2>jquery CSS3制作简洁遮罩弹出层动画</h2>

几种常见的简洁弹框</div>

</div>

自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了

</div>

<a href="javascript:;" class="cd-popup-close">close</a>

</div>

自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了,更多特效：<a href="http://hovertree.com/texiao/" target="_blank">http://hovertree.com/texiao/</a>

</div>

<a href="javascript:;" class="cd-popup-close">close</a>

</div>

自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了

</div>

<a href="javascript:;" class="cd-popup-close">close</a>

</div>

自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了

</div>

<a href="javascript:;" class="cd-popup-close">close</a>

</div>

/*弹框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.which=='27'){

$('.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.which=='27'){

$('.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.which=='27'){

$('.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.which=='27'){

$('.cd-popup3').removeClass('is-visible3');

}

});

</script>

</body>

</html>

以上所述是小编给大家介绍的基于jQuery实现弹出可关闭遮罩提示框实例代码，希望对大家有所帮助

上一篇：深入理解JS正则表达式-分组

下一篇：JavaScript获取css行间样式,内连样式和外链样式的简单方法

手机网站地址：基于jQuery实现弹出可关闭遮罩提示框实例代码

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！