<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. [转载]解决sudo: sorry, you must have a tty to run sudo

    前几天遇到一个问题,在一个终端中调用另一个shell,始终是无法执行的,后来捕捉到报错信息为sudo: sorry, you must have a tty to run sudo,后来,在网上了解到 ...

  2. js中的伪数组

    一, 伪数组 1. 具有length属性 2. 按索引方式存储数据 3. 不具有数组的方法, 比如push(),pop()等 二, 生成伪数组的方法 在js中生成伪数组的方法比较多 1. functi ...

  3. 从Unity中的Attribute到AOP(七)

    本章我们将依然讲解Unity中的Attribute,继续命名空间在UnityEngine里的. PropertyAttribute,这个特性主要来控制变量或者类在Inspector里面的显示方式.和P ...

  4. 【转载】OAuth2 流程

    OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释,主要参考材料为R ...

  5. Yii2基本概念之——属性(property)

    学习任何一门学问,往往都是从起基本的概念学起.万丈高楼平地起,这些基本概念就是高楼的基石,必须做详尽的分析.我们知道,Yii2是一款脉络清晰的框架,理顺了基础的概念和基本功能,学习更高级和复杂的功能就 ...

  6. 基于Grafana+SimpleJson的灵活报表解决方案

    在时序分析及监控展现领域,Grafana无疑是开源解决方案中的翘楚,其灵活的插件机制,支持各种漂亮的面板.丰富的数据源以及强大的应用.典型的面板有Graph.Text.Singlestat.PieCh ...

  7. [51nod1532]带可选字符的多字符串匹配

    有一个文本串,它的长度为m (1 <= m <= 2000000),现在想找出其中所有的符合特定模式的子串位置. 符合特定模式是指,该子串的长度为n (1 <= n <= 50 ...

  8. BOX

    题目连接:http://acm.tju.edu.cn/toj/showp2392.html2392.   Box Time Limit: 1.0 Seconds   Memory Limit: 655 ...

  9. 【端-iOS】给iOS开发入门者编码的一点建议

    规范编码可以提高代码的可读性,降低维护成本.作为一个程序员,要对自己写的代码负责,虽然bug无可避免,但是写代码时最基本的编码规则还是应该遵守的,否则不是坑自己就是坑别人,因为代码肯定是要维护的. 下 ...

  10. NullPointerException org.apache.commons.digester.Digester.getXMLReader(Digester.java:1058)

    http://pwu-developer.blogspot.com/2010/01/nullpointerexception.html Maven is great build tool making ...