jQuery实现的两种简单弹窗效果示例

本文实例讲述了框架实现的两种简单弹窗效果。分享给大家供大家参考，具体如下：

这里利用框架实现两种弹窗效果：

1.淡入弹窗效果：

！DOCTYPE html html head meta charset=' utf-8 ' titlewww.jb51.net jQuery弹窗/title style * { padd : 0；保证金： 0；} .盒子{宽度： 100%；高度： 100%;} .主{宽度： 100%；高度： 100%;背景-color: rgba(0，0，0，0.8)；显示器：无；位置：固定；z-index : 1；} .主机箱{宽度： 800px高度： 100%;margin: 0自动背景-color: rgba(255，255，255，0.8)；padding: 20px }。kkk {宽度： 100%；高度： 1200像素；背景-颜色：红色；} .关闭{color:红色；光标：指针；}/style脚本src=' http :http://libs。百度。com/jquery/1。10 .2/jquery。量滴js '/script script $(function(){ $(')).BTN ' .单击(函数(){ $(').主').fadeIn()；});$('.关闭')。单击(函数(){ $(').主').淡出()；});});/script/head body div class=' main ' div class=' main box ' div class=' close '点击关闭/div/div/div class=' box ' div class=' kkk ' input class=' BTN ' type=' button ' value='点击淡入弹窗//div /div /body/html运行效果：

2.滑动弹窗效果：

！DOCTYPE html html head meta charset=' utf-8 ' titlewww.jb51.net jQuery弹窗/title style * { padd : 0；保证金： 0；} .盒子{宽度： 100%；高度： 100%;} .主{宽度： 100%；高度： 100%;背景-color: rgba(0，0，0，0.8)；显示器：无；位置：固定；z-index : 1；} .主机箱{宽度： 800px高度： 100%;margin: 0自动背景-color: rgba(255，255，255，0.8)；padding: 20pxdisplay:无；} .kkk {宽度： 100%；高度： 1200像素；背景-颜色：红色；} .关闭{color:红色；光标：指针；}/style脚本src=' http :http://libs。百度。com/jquery/1。10 .2/jquery。量滴js '/script script $(function(){ $(')).BTN ' .单击(函数(){ $(').主').fadeIn()；$('.mainbox ').延迟(500)。向下滑动()；});$('.关闭')。单击(函数(){ $(').主').淡出()；});});/script/head body div class=' main ' div class=' main box ' div class=' close '点击关闭/div/div/div class=' box ' div class=' kkk ' input class=' BTN ' type=' button ' value='点击淡入弹窗//div /div /body/html运行效果：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery窗口操作技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。