<!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. 无插件Vim编程技巧

    无插件Vim编程技巧 http://bbs.byr.cn/#!article/buptAUTA/59钻风 2014-03-24 09:43:46 发表于:vim  相信大家看过<简明Vim教程& ...

  2. 浅谈.Net和Java互相调用的三种方式

    在很多的大型系统开发中,开发工具往往不限制于同一种开发语言,而是会使用多种开发语言的混合型开发.目前Java和.Net都声称自己占85%的市场份 额,不管谁对谁错,Java和.Net是目前应用开发的两 ...

  3. MySQL重置密码与远程连接权限问题

    如果mysql没有密码,或者密码设置为空的时候可以通过在用管理员身份打开cmd,然后在里面输入mysqladmin -u root password 123456  这个地方的密码是明文密码. 如果忘 ...

  4. cout输出字符串指针

    先给出通过字符型指针输出字符串的示例代码,如下: #include <iostream>using std::cout;using std::endl; int main(){ const ...

  5. NOIP2014解方程

    题目:求一个n次整系数方程在1-m内的整数解  n<=100 系数<=10000位 m<=100W 题解:最暴力的想法是枚举x,带入求值看是否为0. 这样涉及到高精度乘高精度,高精度 ...

  6. 使用Maven构建Web项目的目录结构

    1.Web项目的目录结构     基于Java的Web项目,标准的打包方式是WAR.与JAR比较,包含更多的内容,比如JSP文件.Servlet.Java类.web.xml配置文件.依赖JAR包.静态 ...

  7. HDU 5916 Harmonic Value Description 【构造】(2016中国大学生程序设计竞赛(长春))

    Harmonic Value Description Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Ja ...

  8. Bootstrap 3 兼容 IE8 浏览器

    公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...

  9. [转载]css hack

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  10. openStack 瓶颈测试