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

网络编程 JavaScript javascript类库 jquery 分类:[default] 更新日期: 2016-03-30
这篇文章主要介绍了jquery实现点击弹出带标题栏的弹出层从右上角飞入效果,涉及jQuery响应鼠标事件操作页面元素动画效果的实现技巧,需要的朋友可以参考下

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

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

运行效果截图如下:

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

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-codes/

具体代码如下:

<!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 ></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • ie9下关闭弹出窗口出现__flash__removeCallback未定义错误
    在关闭弹出窗口时,出现__flash__removeCallback未定义错误.而且是关了又出现,关于这个问题的解决方法如下使用swfupload作为上传组件,artdialog作为弹出窗口,在关闭弹出窗口时,出现"__flash__removeCallback"未定义错误.而且是关了又出现.网上有些解决方案,主要就是说覆写"_ ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
  • jQuery如何用正则表达式验证手机号、身份证号、中文名称
    这篇文章主要介绍了jQuery如何用正则表达式验证手机号.身份证号.中文名称 的相关资料,需要的朋友可以参考下数字判断方法:isNaN()函数 test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证中文名称 function isChinaName(name) { var pattern ...
  • php微信开发之批量生成带参数的二维码
    php微信开发之批量生成带参数的二维码
    这篇文章主要介绍了php微信开发之批量生成带参数的二维码 的相关资料,需要的朋友可以参考下带参数的二维码对于渠道营销推广来说是很有用的,可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送,可喜的是微信开通了这个接口,那下面就来研究一下吧. 具体接口说明请参见,微信公众平台开发者文档(http://mp.weixin.qq.com/wiki ...
  • ASP.NETWebApi2实现多文件打包并下载文件的实例
    ASP.NETWebApi2实现多文件打包并下载文件的实例
    这篇文章主要介绍了ASP.NET Web Api 2利用ByteArrayContent和StreamContent实现多文件打包并下载的方法,提供源码下载,需要的朋友可以参考下.最近由于工作和个人事务,站点也好久没更新了,但这并不影响我对.NET的热情.站点的更新工作还是得想办法抽时间来完成的. 今天利用中午的时间来写一篇关于Asp.Net Web Api ...
  • ASP.NET(C#)WebApi通过文件流下载文件的实例
    这篇文章主要介绍了ASP.NETC# Web Api通过文件流下载文件的方法,提供源码下载,需要的朋友可以参考下.下载文件到本地是很多项目开发中需要实现的一个很简单的功能.说简单,是从具体的代码实现上来说的,.NET的文件下载方式有很多种,本示例给大家介绍的是ASP.NET Web Api方式返回HttpResponseMessage下载文件到本地.实现的方 ...
猜你喜欢