标签归档:弹出窗口

纯CSS3带遮罩的弹出层插件 倾斜切入动画

今天我们要给大家分享一款基于纯CSS3的弹出窗口插件,这个弹出层动画的特点是带有遮罩,并且遮罩的透明度可以自定义;另外还有一个特点是弹出层在弹出的时候伴随倾斜切入的动画特效,同样弹出层在关闭时也有相同的动画效果。

pure-css3-popup-animation

在线演示源码下载

jQuery弹出登录表单窗口插件

这是一款基于jQuery的登录表单插件,有一点特别的是该登录表单是一个弹出层窗口,表单即嵌在这个窗口里面,并且弹出层还有一层遮罩将网页的其他部分遮盖住。表单在弹出的时候利用jQuery的动画特性将会出现淡入淡出的迷人效果。

jquery-pop-login-form

下面我们一起来看看这款登录窗口的实现过程,相对来讲还是比较简单的。

HTML代码

这里主要是两个部分,一个是点击弹出窗口的按钮,另外一个则是登录窗口界面,HTML代码如下:

<a href="#" id="example">登录DIY账号窗口示例</a>

    <div id="LoginBox">
        <div class="row1">
            登录DIY账号窗口<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
        </div>
        <div class="row">[......]

阅读全文>>

jQuery UI结合CSS3可拖拽半透明窗口

今天我们要分享一款可以拖拽的小窗口程序,这个窗口特效是利用jQuery UI和CSS3制作而成的,窗口是半透明的,可以用鼠标拖拽,配合大气的山水背景图,显得非常壮观。拖拽功能是jQuery实现的,另外窗口的透明外观,以及边框的阴影是利用CSS3实现的。

css3-jquery-drag-window

在线演示源码下载

CSS3/jQuery自定义弹出窗口 多种弹出动画

这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html,十分灵活。另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的。

jquery-css3-modal-window

在线演示源码下载