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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-淡入标题-信息-样式-警报-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlejquery从页面右上角弹出的浮层代码/title style * { margin 33600；划水：0;列表样式-:型无；} body { font-family : ' Microsoft ya hei '；} a { text-decoration : none}.showdiv { color : # fffpadding :8 px 15px背景# 09F文本对齐：居中；显示：块；宽度width :150 pxmargin :100 px auto }。show box { width :0 pxheart :0 pxdisplay : none位置：绝对；右right:0top:0z指数：100;border:1px #8FA4F5实心；padding:1px背景# fff}。show box H2 { height :25 px font-size :14 px；背景色： # 3366 cc位置：相对；填充-左侧：10 px线高：25 pxcolor: # fff}。显示框H2 a {位置：绝对；right :5 xtop :0 font-size :12 px；color: # fff}。展示盒mainlist { padding:10px }。展示盒主列表p { font : normal 14px/2 ' Microsoft ya hei '；文本缩进：2 emcolor : # 333 add-top :5 px；} #赵哲{底色： # 666；位置：绝对；z索引：99;left :0 to :0 display : none宽度：100%;高度：100%;opa city 33600.5 filter : alpha(不透明度=50);-莫兹-奥帕市3360 0.5；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).showdiv ').点击(function(){ var box=300；var th=$(窗口)。scrollTop() $(窗口)。高度()/1.6-箱；var h=文档。尸体。客户身高；var rw=$(窗口)。width()/2-box；$('.显示框').动画({top:th，opacity: ' show '，width:600，height:340，right:rw}，500)；$(' #赵哲')。css({ display:'block '，height:$(document).height()})；返回false })；$('.展示盒。关闭')。单击(function(){ $(this)).父母('。显示框').动画({top:0，opacity: ' hide '，width:0，height:0，right:0}，500)；$(' #赵哲')。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 id='赵哲/div div style=' text-align : center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。