jQuery+CSS3遮罩弹出层动画代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3遮罩弹出层动画代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery+CSS3遮罩弹出层动画代码 </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="checkbox">
	<a href="javascript:0;" class="cd-popup-trigger0">样式1</a>
    <a href="javascript:0;" class="cd-popup-trigger1">样式2</a>
    <a href="javascript:0;" class="cd-popup-trigger2">样式3</a>
    <a href="javascript:0;" class="cd-popup-trigger3">样式4</a>
</div>
<!--弹框-->
<div class="cd-popup">
    <div class="cd-popup-container">
        <p>几种常见的简洁弹框</p>
        <div class="cd-buttons">
            自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了
        </div>
        <a href="#0" class="cd-popup-close">close</a>
    </div>
</div>

<div class="cd-popup1">
    <div class="cd-popup-container1">
        <p>几种常见的简洁弹框</p>
        <div class="cd-buttons">
            自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了
        </div>
        <a href="#0" class="cd-popup-close">close</a>
    </div>
</div>

<div class="cd-popup2">
    <div class="cd-popup-container2">
        <p>几种常见的简洁弹框</p>
        <div class="cd-buttons">
            自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了
        </div>
        <a href="#0" class="cd-popup-close">close</a>
    </div>
</div>

<div class="cd-popup3">
    <div class="cd-popup-container3">
        <p>几种常见的简洁弹框</p>
        <div class="cd-buttons">
            自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了
        </div>
        <a href="#0" class="cd-popup-close">close</a>
    </div>
</div>
<script type="text/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.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');
            }
        });
		
		//打开窗口
        $('.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>

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
html,body{padding:0;margin:0}
.checkbox{width:100%;height:100px;margin:100px auto;text-align:center}
.checkbox a{display:inline-block;width:100px;height:40px;border:solid 1px #f00;color:#f00;text-align:center;line-height:40px;text-decoration:none}
/*弹框样式1*/
.cd-popup{position:fixed;left:0;top:0;height:100%;width:100%;background-color:rgba(0,0,0,0.5);opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s 0s,visibility 0s 0.3s;-moz-transition:opacity 0.3s 0s,visibility 0s 0.3s;transition:opacity 0.3s 0s,visibility 0s 0.3s;z-index:9999;}
.cd-popup.is-visible{opacity:1;visibility:visible;-webkit-transition:opacity 0.3s 0s,visibility 0s 0s;-moz-transition:opacity 0.3s 0s,visibility 0s 0s;transition:opacity 0.3s 0s,visibility 0s 0s;}
.cd-popup-container{position:relative;width:400px;margin:250px auto;height:250px;background:#FFF;border-radius:.4rem .4rem .4rem .4rem;text-align:center;box-shadow:0 0 20px rgba(0,0,0,0.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);-webkit-backface-visibility:hidden;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-ms-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;}
.cd-popup-close{position:absolute;right:10px;top:10px;z-index:10;width:auto;height:1.25rem;display:block;font-size:14px;}
.is-visible .cd-popup-container{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
/*弹框样式2*/
.cd-popup1{position:fixed;left:0;top:0;height:100%;width:100%;background-color:rgba(0,0,0,0.5);opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s 0s,visibility 0s 0.3s;-moz-transition:opacity 0.3s 0s,visibility 0s 0.3s;transition:opacity 0.3s 0s,visibility 0s 0.3s;z-index:9999;}
.cd-popup1.is-visible1{opacity:1;visibility:visible;-webkit-transition:opacity 0.3s 0s,visibility 0s 0s;-moz-transition:opacity 0.3s 0s,visibility 0s 0s;transition:opacity 0.3s 0s,visibility 0s 0s;}
.cd-popup-container1{position:relative;width:400px;margin:250px auto;height:250px;background:#FFF;border-radius:.4rem .4rem .4rem .4rem;text-align:center;box-shadow:0 0 20px rgba(0,0,0,0.2);-webkit-transform:translateY(-60px);-moz-transform:translateY(-60px);-ms-transform:translateY(-60px);-o-transform:translateY(-60px);transform:translateY(-60px);-webkit-backface-visibility:hidden;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-ms-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;}
.cd-popup-close{position:absolute;right:10px;top:10px;z-index:10;width:auto;height:1.25rem;display:block;font-size:14px;}
.is-visible1 .cd-popup-container1{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
/*弹框样式3*/
.cd-popup2{position:fixed;left:0;top:0;height:100%;width:100%;background-color:rgba(0,0,0,0.5);opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s 0s,visibility 0s 0.3s;-moz-transition:opacity 0.3s 0s,visibility 0s 0.3s;transition:opacity 0.3s 0s,visibility 0s 0.3s;z-index:9999;}
.cd-popup2.is-visible2{opacity:1;visibility:visible;-webkit-transition:opacity 0.3s 0s,visibility 0s 0s;-moz-transition:opacity 0.3s 0s,visibility 0s 0s;transition:opacity 0.3s 0s,visibility 0s 0s;}
.cd-popup-container2{position:relative;width:400px;margin:250px auto;height:250px;background:#FFF;border-radius:.4rem .4rem .4rem .4rem;text-align:center;box-shadow:0 0 20px rgba(0,0,0,0.2);-webkit-transform:translateY(60px);-moz-transform:translateY(60px);-ms-transform:translateY(60px);-o-transform:translateY(60px);transform:translateY(60px);-webkit-backface-visibility:hidden;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-ms-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;}
.cd-popup-close{position:absolute;right:10px;top:10px;z-index:10;width:auto;height:1.25rem;display:block;font-size:14px;}
.is-visible2 .cd-popup-container2{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
/*弹框样式3*/
.cd-popup3{position:fixed;left:0;top:0;height:100%;width:100%;background-color:rgba(0,0,0,0.5);opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s 0s,visibility 0s 0.3s;-moz-transition:opacity 0.3s 0s,visibility 0s 0.3s;transition:opacity 0.3s 0s,visibility 0s 0.3s;z-index:9999;}
.cd-popup3.is-visible3{opacity:1;visibility:visible;-webkit-transition:opacity 0.3s 0s,visibility 0s 0s;-moz-transition:opacity 0.3s 0s,visibility 0s 0s;transition:opacity 0.3s 0s,visibility 0s 0s;}
.cd-popup-container3{position:relative;width:400px;margin:250px auto;height:250px;background:#FFF;border-radius:.4rem .4rem .4rem .4rem;text-align:center;box-shadow:0 0 20px rgba(0,0,0,0.2);-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);-webkit-backface-visibility:hidden;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-ms-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;}
.cd-popup-close{position:absolute;right:10px;top:10px;z-index:10;width:auto;height:1.25rem;display:block;font-size:14px;}
.is-visible3 .cd-popup-container3{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}

附件:下载该文件资源,减少时间成本(增值服务)