您当前的位置：首页 > 网站建设笔记 >

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

0

几种常见的简洁弹框

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

样式1样式2样式3样式4

单行文本框input与多行文本框textarea有什么区别

在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍然存在一些重要的区别。

[关闭]

JavaScript select选择文本与select事件

单行与多行文本框都支持select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器（Opera除外）都会将焦点设置到文本框中。这个方法不授受参数，可以在任何时候被调用。下面来看一个例子。

[关闭]

使用JavaScript操作引用表单字段

可以像访问页面中的其他元素一样，使用原生DOM方法访问表单元素。此外，每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在elements集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和name特性来访问它们。下面来看一个例子。

[关闭]

javascript如何引用表单元素

JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。尽管目前的Web和JavaScript已经有了长足的发展，但Web表单的变化并不明显。由于Web表单没有为许多常见任务提供现成的解决手段，很多开发人员不仅会在验证表单时使用JavaScript，而且还增强了一些标准表单控件的默认行为。

[关闭]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery+CSS3遮罩弹出层动画代码</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
/*重置样式*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;outline:none;list-style:none}

.checkbox {height:100px;margin:20px auto;text-align:center}
.checkbox a {display:inline-block;width:100px;height:40px;border:solid 1px #cc0033;color:#cc0033;text-align:center;line-height:40px;text-decoration:none;margin-right:8px}
.checkbox a:last-child {margin:0;}

/*Begin共享的弹框样式代码*/
.cd-popup,
.cd-popup1,
.cd-popup2,
.cd-popup3 {
    position:fixed;left:0;top:0;
    width:100%;height:100%;
    background-color:#333;  /*for IE*/
    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:10;
}
.cd-popup.is-visible,
.cd-popup1.is-visible1,
.cd-popup2.is-visible2,
.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;
}
/*End*/

/*弹框样式1*/
.cd-popup-container {
    position:relative;
    width:400px;height:250px;
    margin:250px auto;padding:10px;
    background:#fff;
    border-radius:.4rem .4rem .4rem .4rem;
    box-shadow:0 0 20px rgba(0,0,0,0.2);

    /*弹框的大小从1.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:12px}
.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-popup-container1 {
    position:relative;
    width:400px;height:250px;
    margin:250px auto;padding:10px;
    background:#fff;
    border-radius:.4rem .4rem .4rem .4rem;
    box-shadow:0 0 20px rgba(0,0,0,0.2);

    /*
    translate（移动）通过你指定的值单纯地移动元素。
    你可以用任何有意义的距离单位。其中，百分比值是相对你所变形容器的宽或高的百分比，而不是它的父容器。
    如果是负值，容器是向左向上移动而不是向右向下。

    向上移动60像素
    */
    -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;
}
.is-visible1 .cd-popup-container1 {
    /*由起始设置元素向上移动60像素过渡地向下移动，形成从上而下的移动动画效果。*/
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
/*弹框样式3*/
.cd-popup-container2 {
    position:relative;
    width:400px;height:250px;
    margin:250px auto;padding:10px;
    background:#fff;
    border-radius:.4rem .4rem .4rem .4rem;
    box-shadow:0 0 20px rgba(0,0,0,0.2);

    /*向下移动60像素*/
    -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;
}
.is-visible2 .cd-popup-container2 {
    /*由下向上的移动动画效果*/
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
/*弹框样式4*/
.cd-popup-container3 {
    position:relative;
    width:400px;height:250px;
    margin:250px auto;padding:10px;
    background:#fff;
    border-radius:.4rem .4rem .4rem .4rem;
    box-shadow:0 0 20px rgba(0,0,0,0.2);

    /*初始缩放元素的大小为本身的0.8倍*/
    -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;
}
.is-visible3 .cd-popup-container3 {
    /*从0.8倍的大小放大回正常大小，形成放大元素的动画效果。*/
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
</style>
</head>
<body>
<p><strong>几种常见的简洁弹框</strong></p>
<p>自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了。</div>
<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><b><a href="/wangzhanbj/185.html">单行文本框input与多行文本框textarea有什么区别</a></b></p>
        <p>在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍然存在一些重要的区别。</p>
        <a href="" class="cd-popup-close">[关闭]</a>
    </div>
</div>

<div class="cd-popup1">
    <div class="cd-popup-container1">
        <p><b><a href="/wangzhanbj/186.html">JavaScript select选择文本与select事件</a></b></p>
        <p>单行与多行文本框都支持select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器（Opera除外）都会将焦点设置到文本框中。这个方法不授受参数，可以在任何时候被调用。下面来看一个例子。</p>
        <a href="" class="cd-popup-close">[关闭]</a>
    </div>
</div>

<div class="cd-popup2">
    <div class="cd-popup-container2">
        <p><b><a href="/wangzhanbj/181.html">使用JavaScript操作引用表单字段</a></b></p>
        <p>可以像访问页面中的其他元素一样，使用原生DOM方法访问表单元素。此外，每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在elements集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和name特性来访问它们。下面来看一个例子。</p>
        <a href="" class="cd-popup-close">[关闭]</a>
    </div>
</div>

<div class="cd-popup3">
    <div class="cd-popup-container3">
        <p><b><a href="/wangzhanbj/178.html">javascript如何引用表单元素</a></b></p>
        <p>JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。尽管目前的Web和JavaScript已经有了长足的发展，但Web表单的变化并不明显。由于Web表单没有为许多常见任务提供现成的解决手段，很多开发人员不仅会在验证表单时使用JavaScript，而且还增强了一些标准表单控件的默认行为。</p>
        <a href="" class="cd-popup-close">[关闭]</a>
    </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
    //弹出1
    $(".cd-popup-trigger0").on("click", function(event){
        event.preventDefault();
        $(".cd-popup").addClass("is-visible");
    });
    //关闭窗口
    $(".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");
        }
    });

    //弹出2
    $(".cd-popup-trigger1").on("click", function(event){
        event.preventDefault();
        $(".cd-popup1").addClass("is-visible1");
    });
    //关闭窗口
    $(".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");
        }
    });

    //弹出3
    $(".cd-popup-trigger2").on("click", function(event){
        event.preventDefault();
        $(".cd-popup2").addClass("is-visible2");
    });
    //关闭窗口
    $(".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");
        }
    });

    //弹出4
    $(".cd-popup-trigger3").on("click", function(event){
        event.preventDefault();
        $(".cd-popup3").addClass("is-visible3");
    });
    //关闭窗口
    $(".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>
你也许感兴趣的
上一篇：表单登录框(带有第三方登录)下一篇：js遮罩垂直水平居中弹出登录表单层动画
CMS常见问题
阅读排行
本月排行

建站咨询

咨询热线

微信交流

返回顶部