<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. 知乎上看到的关于类.class,对象.getClass

    public class TestDemo { //测试 @Test public void fun01() { TestDemo q=new TestDemo(); A a = new A(); q ...

  2. Java压测之四两拨千斤

    压测之四两拨千斤核心观念: 1.传统的http请求肯定不能用于压测,原因是请求一次,响应一次,而响应数据同时占用了客户端的带宽,故此,客户端请求后,不需要接受响应,让服务器单相思去. 2.寻找可以令服 ...

  3. Java入门篇（二）——Java语言基础（下）

    上篇说到Java中的变量与常量,接下来就是简单的计算了,首先需要了解一下Java中的运算符. 六.运算符 1. 赋值运算符 赋值运算符即"=",是一个二元运算符(即对两个操作数进行 ...

  4. 洛谷 P1598 垂直柱状图【字符串+模拟】

    P1598 垂直柱状图 题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...

  5. 51Nod 1091 线段的重叠(贪心+区间相关,板子题)

    1091 线段的重叠 基准时间限制:1 秒 空间限制:131072 KB 分值: 5         难度:1级算法题 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 2 ...

  6. NowCoderWannafly挑战赛3-B.遇见

    遇见 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 65536K,其他语言131072K64bit IO Format: %lld 题目描述 A和B在同一条路上,他们之间的距离为 k ...

  7. 全面理解Java内存模型

    尊重原创:http://blog.csdn.net/suifeng3051/article/details/52611310 Java内存模型即JavaMemory Model,简称JMM.JMM定义 ...

  8. Java简历与面试

    尊重原创:http://blog.csdn.net/love_java_cc/article/details/78292347 Java就业指导   想要成为合格的Java程序员或工程师到底需要具备哪 ...

  9. virtualbox虚拟机NAT模式下不能连接外网

    背景 给VirtualBox虚拟机(装载了Ubuntu16.04系统)配置了两张网卡,网络模式分别为"网络地址转换(NAT)"和"仅主机(Host-Only)适配器&qu ...

  10. XML中文乱码问题

    XML中文乱码问题