jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果


Posted in Javascript onSeptember 19, 2015

本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果。分享给大家供大家参考。具体如下:

这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用。

运行效果截图如下:

jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery从页面右上角弹出的浮层代码</title> 
<style>
*{margin:0;padding:0;list-style-type:none;}
body{font-family:'microsoft yahei';}
a{text-decoration:none;}
.showdiv{color:#fff;padding:8px 15px;background:#09F;text-align:center;display:block;width:150px;margin:100px auto;}
.showbox{width:0px;height:0px;display:none;position:absolute;right:0;top:0;z-index:100;border:1px #8FA4F5 solid;padding:1px;background:#fff;}
.showbox h2{height:25px;font-size:14px;background-color:#3366cc;position:relative;padding-left:10px;line-height:25px;color:#fff;}
.showbox h2 a{position:absolute;right:5px;top:0;font-size:12px;color:#fff;}
.showbox .mainlist{padding:10px;}
.showbox .mainlist p{font:normal 14px/2 'microsoft yahei';text-indent:2em;color:#333;padding-top:5px;}
#zhezhao{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".showdiv").click(function(){
  var box =300;
  var th= $(window).scrollTop()+$(window).height()/1.6-box;
  var h =document.body.clientHeight;
  var rw =$(window).width()/2-box;
  $(".showbox").animate({top:th,opacity:'show',width:600,height:340,right:rw},500);
  $("#zhezhao").css({
   display:"block",height:$(document).height()
  });
  return false;
 });
 $(".showbox .close").click(function(){
  $(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
  $("#zhezhao").css("display","none");
 });
});
</script>
</head>
<body>
 <a class="showdiv" href="#">点击我弹出浮层</a>
 <div class="showbox">
  <h2>三水点靠木简介<a class="close" href="#">关闭</a></h2>
  <div class="mainlist">
   <p>三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料。
</p>
  </div>
 </div> 
 <div id="zhezhao"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

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

Javascript 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 #Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 #Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 #Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 #Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 #Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 #Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 #Javascript
You might like
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
浅谈MySQL中的触发器
2015/05/05 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
使用Python实现画一个中国地图
2019/11/23 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
python 绘制正态曲线的示例
2020/09/24 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
技术总监个人的自我评价范文
2013/12/18 职场文书
建设工地安全标语
2014/06/07 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2016年教代会开幕词
2016/03/04 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js