<script type="text/javascript">

$(document).ready(function(){

$('.one').click(function(){    //点击a标签

$('.box').show();               弹出层显示

});

$('span').click(function(){    //点击关闭按钮  弹出层隐藏

$('.box').hide();

});

$('.box_all').easydrag();　　　　//弹出层可以拖动

});

</script>

<style type="text/css">
* { padding:0; margin:0; }

body { font-size:12px; padding:100px; }

.box_all { float:left; padding:5px; background:#eee; position:absolute; top:30%; left:30%;}

.box { width:500px; border:1px solid #4c7ebd; display:none; }

.box h1 { height:30px; line-height:30px; color:#fff; font-size:14px; background:#87b0e1; padding-left:10px; }

.box span { float:right; padding-right:10px; cursor:pointer;}

.box span a { display:block; height:30px; width:30px; background:url(img/close.jpg) no-repeat; text-indent:-9999px;}

.box span a:hover { background:url(img/close_hover.jpg) no-repeat;}

.box p { padding:10px; height:400px; background:#fff; border:3px solid #eee; }

.one { display:block;}

</style>

<body>
<a href="#" class="one">后盾网教程</a><br />
<input type="submit" class="one" value="后盾网教程" />
<br />
<input type="text" class="one" value="后盾网教程" />
<div class="box_all">
<div class="box">
<h1><span><a href="#">关闭</a></span>这是标题</h1>
<p>这是内容</p>
</div>
</div>
</body>

Jquery实现弹出层效果的更多相关文章

  1. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  2. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  3. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  4. jQuery弹出层效果

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

  5. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  6. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  7. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  8. 使用JavaScript实现弹出层效果

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...

  9. 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox）

    下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下:   像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...

随机推荐

  1. 由浅入深SCF无服务器云函数实践

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:陈杰,腾讯云架构平台部技术专家 近年来,互联网服务从一开始的物理服务器托管,虚拟机,容器,发展到现在的云函数,逐步无服务器化,如下表所示. ...

  2. windows第七层负载均衡--基于IIS的ARR负载均衡

    载均衡有很多种方法,有硬件负载均衡,软件负载均衡,还可以从域名解析下手. 不过,今天只讲软件负载均衡 软件负载均衡一般分两种,从网络协议来讲(tcp/ip),主要集中在第四层和第七层进行负载均衡. 第 ...

  3. MySQL索引 - 索引的类型

    索引的类型 B-Tree索引 B-Tree 索引 通常意味着所有的值都是按顺序存储的,并且每一个叶子页到根的距离相同. B-Tree 索引 能够加快访问数据的速度,存储引擎不再需要进行全表扫描来获取需 ...

  4. Linux（常用命令） 中常用的压缩丶解压缩格式命令和参数详解

    Linux中常用的压缩格式后缀名有:①.zip  ②.gz  ③.bz2  ④.tar.gz  ⑤.tar.bz2 ①.zip后缀名格式 1.压缩 语法: ①zip 压缩文件名 源文件 (压缩文件) ...

  5. vue-cli完整地引入element-ui

    1因为该组件会依赖于jQuery,所以先安装jQuery所需依赖: 进入npm控制台,输入指令: cnpm install jquery --save-dev 然后在入口文件main.js中引入: i ...

  6. 接口测试——Java + TestNG 国家气象局接口（json解析）实例

    后端测试,主要以测试接口为主.需要代码支撑,近期便找了个天气接口捣鼓了. 使用到的工具是:Eclipse + TestNG + Maven + ReportNG,全国城市编码:http://www.c ...

  7. meterpreter_paranoid_mode.sh允许用户安全上演/无级连接Meterpreter经检查合格证书的处理程序正在连接到

    刚刚看完即刻安全大咖的新姿势感觉很6逼,结果成功了meterpreter_paranoid_mode.sh允许用户安全上演/无级连接Meterpreter经检查合格证书的处理程序正在连接到. 我们开始 ...

  8. Java中import及package的用法

    有些人写了一阵子 Java,可是对於 Java 的 package 跟 import 还是不 太了解很多人以為原始码 .java 档案中的 import 会让编译器把所 import 的程式通通写到编 ...

  9. [bzoj3191] [JLOI2013]卡牌游戏

    概率DP. 首先由题解可得>_<,胜出概率只与剩余人数.与庄家的相对位置有关. 所以设f[i][j]表示剩下i个人,从庄家开始第j个人的胜利概率... 根据卡牌一通乱搞即可... #inc ...

  10. 一步一步从原理跟我学邮件收取及发送 3.telnet命令行发一封信

    首先要感谢博客园管理员的及时回复,本系列的第二篇文章得以恢复到首页,这是对作者的莫大鼓励.说实在的本来我真的挺受打击的.好在管理员说只是排版上有些问题,要用代码块修饰下相关的信息.说来惭愧因为常年编码 ...