<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. 从Unity中的Attribute到AOP(四)

    本篇我们将逐一讲解Unity中经常使用的Attribute(Unity对应的文档版本为2018.1b). 首先是Serializable,SerializeField以及NonSerialized,H ...

  2. smtplib 报错501

    昨天用stmplib写了一个自动发送的邮件的小程序. 之前能够正常运行,到了下午发现报错. 报错信息:smtplib.SMTPSendRefused(501,b'\xc7\xeb\xb5\xc7\xc ...

  3. jdk1.8新特性 : 接口中可以有普通方法(非静态方法)和静态方法 , 颠覆了之前我的理解 : 接口中只能有共有常量和抽象方法的概念,后面必须要加一句jdk1.7和1..7之前

    看到jdk某些接口中存在default方法,于是... http://shaomeng95.iteye.com/blog/998820    为什么接口只能是公有常量? public interfac ...

  4. html页面的音频问题

    导火线 : 负责了项目中的话务间模块,处理音频出了一点问题 之前的处理 : //循环播放声音 var dialAudioDocument = document.createElement('audio ...

  5. cs231n spring 2017 lecture13 Generative Models 听课笔记

    1. 非监督学习 监督学习有数据有标签,目的是学习数据和标签之间的映射关系.而无监督学习只有数据,没有标签,目的是学习数据额隐藏结构. 2. 生成模型(Generative Models) 已知训练数 ...

  6. React入门实例教程

    文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...

  7. SPRINGCLOUD 开发学习记录

    一个简单的微服务系统:服务注册和发现,服务消费,负载均衡,断路器,智能路由,配置管理 服务注册中心: eureka是一个高可用组件,没有后端缓存,每一个实例注册后向注册中心发送心跳,默认情况下,eru ...

  8. hackerrank Alex对战Fedor

    任意门 为了在漫长得飞行旅途中娱乐,Alex和Fedor发明了如下的一个简单的双人游戏.游戏是: 首先, Alex画一个有权无向图.该图中可能有多重边(多重边的权值可能相同或者不同). 然后,Fedo ...

  9. bzoj:3085: 反质数加强版SAPGAP

    Description 先解释一下SAPGAP=Super AntiPrime, Greatest AntiPrime(真不是网络流),于是你就应该知道本题是一个关于反质数(Antiprime)的问题 ...

  10. Vijos P1114 FBI树【DFS模拟，二叉树入门】

    描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树1,它的结点类型也包括F结点,B结点和I结点三种 ...