<!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. 使用Python实现Hadoop MapReduce程序

    转自:使用Python实现Hadoop MapReduce程序 英文原文:Writing an Hadoop MapReduce Program in Python 根据上面两篇文章,下面是我在自己的 ...

  2. 2.5.2 使用alertdialog 创建列表对话框

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  3. java学习面向对象之final关键字

    之前我们讲过继承的相关知识了,继承就是子类继承父类的属性和方法并且还可以覆盖父类的方法.但是这样有一个缺陷是什么呢,就是当我们一个类当中涉及一些封装的核心的东西或者对整个系统非常关键的方法或者类的时候 ...

  4. 【转】iOS开发Xcode7真机调试教程

    原文网址:https://www.skyfox.org/ios-xcode7-debug-device.html 从Xcode7开始,Xcode 不需要$99/$299升级开发者直接可以进行真机调试 ...

  5. mapreduce 倒排索引的建立

    大道至简 http://blog.csdn.net/hguisu/article/details/7969757 1.map的输入 key: 文档 id   value: 文档内容 输出: key   ...

  6. 找出数组中出现次数超过一半的数，现在有一个数组，已知一个数出现的次数超过了一半，请用O(n)的复杂度的算法找出这个数

    找出数组中出现次数超过一半的数,现在有一个数组,已知一个数出现的次数超过了一半,请用O(n)的复杂度的算法找出这个数 #include<iostream>using namespace s ...

  7. Django中的Form（二）

    一.保存用户输入内容 如果用户输入一张表单提交后出现错误时,会出现重现填写的情况.我们可以把用户输入的信息保存下来,并返回到前台页面,这样用户就无需再次输入. views.py # coding:ut ...

  8. SQLyog之MySQL客户端的下载、安装和使用

    本博文的主要内容有 .SQLyog的下载 .SQLyog的安装 .SQLyog的使用 1.SQLyog的下载 1.进入SQLyog官网,  https://www.webyog.com/en    或 ...

  9. Error, some other host already uses address

    rhel 5.9,在修改完网卡配置信息重启网卡之后提示如下无法激活网卡: Error, some other host already uses address 确认配置的IP地址是没有在用的,解决办 ...

  10. sencha touch 框架的几种核心脚本文件之间的区别

    sencha-touch-debug.js      供开发时用sencha-touch.js   供发布时用sencha-touch-all.js All     供不能使用SDK构建应用程序时,将 ...