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 相关文章推荐
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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开发大型项目的一点经验
2006/10/09 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python3实现UDP协议的服务器和客户端
2017/06/14 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Series和DataFrame使用简单入门
2019/11/13 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
趣味体育活动方案
2014/02/08 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
干部作风建设心得体会
2014/10/22 职场文书
导游词之杭州西湖
2019/09/19 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python
python基于turtle绘制几何图形
2021/06/15 Python
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python