<!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>点击按钮弹出层效果</title>

 <meta http-equiv="content-type" content="text/html;charset=gb2312">

 <style type="text/css">

 body,h2{margin:;padding:;}

 #faqbg{background-color:#;position:absolute;z-index:;left:;top:;display:none;width:%;height:1000px;opacity:0.5;filter:alpha(opacity=);-moz-opacity:0.5;}

 #faqdiv{position:absolute;width:520px;left:%;top:%;margin-left:-200px;height:auto;z-index:;background-color:#fff;border:1px #8FA4F5 solid;padding:1px;}

 #faqdiv h2{height:25px;font-size:14px;background-color:#8FA4F5;position:relative;padding-left:10px;line-height:25px;}

 #faqdiv h2 a{position:absolute;right:5px;font-size:12px;color:#FF0000;}

 #faqdiv .form{padding:10px;width:500px;height:300px;overflow:auto;}

 </style>

 <script type="text/javascript" src="jquery-1.7.2.js"></script>

 <script type="text/javascript">

 $(function(){

     $(".but").click(function(){

         var str = "展示的内容 ";

         $(".form").html(str);

         $("#faqbg").css({display:"block",height:$(document).height()});

         var yscroll =document.documentElement.scrollTop;

         $("#faqdiv").css("top","100px");

         $("#faqdiv").css("display","block");

         document.documentElement.scrollTop=;

     });

     $(".close").click(function(){

         $("#faqbg").css("display","none");

         $("#faqdiv").css("display","none");

     });

 })

 </script>

 </head>

 <body>

 <div id="faqbg"></div>

 <div id="faqdiv" style="display:none">

     <h2>信息<a href="#" class="close">关闭</a></h2>

     <div class="form">展示的内容</div>

 </div>

 <p> </p>

 <p align="center">

 <a class="but">点击弹出</a>

 </p>

 </body>

 </html>

jquery---点击弹出层的更多相关文章

  1. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  2. jquery 点击弹出层自身以外的任意位置，关闭弹出层

    <!--弹出层---> <div class="mask">    <div class="wrap"></div&g ...

  3. jquery鼠标经过弹出层写法

    jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...

  4. jQuery 插件开发——PopupLayer(弹出层)

    导读:上次写了一篇关于GridView的插件开发方法,上几天由于工作需要,花了一天左右的事件封装了popupLayer(弹出层)插件.今天有时间就记录一下自己的开发思想与大家分享下,同时也算是对这段时 ...

  5. 一款基于jQuery的漂亮弹出层

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  6. jQuery Layer mobile 弹出层

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

  7. jQuery拖拽 & 弹出层

    了解更多请查看 官网 和 API iDrag & iDialog 介绍 特点: iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画. ...

  8. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. Node.js V0.12新特性之性能优化

    v0.12悠长的开发周期(已经过去九个月了,并且还在继续,是有史以来最长的一次)让核心团队和贡献者们有充分的机会对性能做一些优化.本文会介绍其中最值得注意的几个. 支持塞住模式的可写流 现在可写流可以 ...

  2. 【JavsScript】XMLHttpRequest2的进步之处

    本文参考自:XMLHttpRequest2 新技巧 (重点保留demo,方便自己日后查阅) HTML5是现在web开发中的热点,虽然关于web app和local app一直有争论,但是从技术学习的角 ...

  3. PHP 之 Laravel 框架安装及相关开源软件

    Laravel 被称为简洁.优雅的PHP开发框架,但第一次接触此框架的人有不少都卡在了安装上,其实在 Linux 下只需要很简单的几步就可以搞定,这里我们以 CentOS 下 PHP + Nginx ...

  4. Linux学习笔记12——Unix中的进程

    通过调用fork和exec函数都能创建新的进程,但两者有着本质的区别:fork函数拷贝了父进程的内存映像,而exec函数用用新的映像来覆盖调用进程的进程映像的功能. 一  fork函数 #includ ...

  5. ANT的下载和安装

    下载 下载页面:http://ant.apache.org/bindownload.cgi 安装 撰写本文的时候,最新的ANT版本是1.9.7,它是绿色软件,解压缩得到apache-ant-1.9.7 ...

  6. bzoj 3611 [Heoi2014]大工程（虚树+DP）

    3611: [Heoi2014]大工程 Time Limit: 60 Sec  Memory Limit: 512 MBSubmit: 408  Solved: 190[Submit][Status] ...

  7. 正则表达式的先行断言(lookahead)和后行断言(lookbehind)

    正则表达式的先行断言和后行断言一共有4种形式: (?=pattern) 零宽正向先行断言(zero-width positive lookahead assertion) (?!pattern) 零宽 ...

  8. 用Delphi直接获取bmp图片的像素

    用Delphi直接获取bmp图片的像素,并存储显示出.(此像素主要用在LED上显示).希望高手能给出代码啊!! function getImagePixels(f: string): Integer; ...

  9. 如何使用TcpDump抓取远程主机的流量并回显到本地的WireShark上

    ssh -t username@remoteip "echo rootpassword | sudo -S tcpdump -i eth0 -A '(tcp[((tcp[12:1] & ...

  10. SRM 409(1-250pt, 1-500pt)

    DIV1 250pt 题意:称string s是vector<string> words的ordered superstring,如果它满足:存在一个数列{x0, x1, x2...xm} ...