<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. CentOS配置SSH免密登录

    假如我们有两台CentOS机器,192.168.199.101,192.168.199.102,要想在101上远程连接102可以通过ssh命令来实现 ssh 192.168.199.102 如果没有配 ...

  2. 内网IP无法访问

    就是我们在3类地址中常见到内网的IP段. 10.0.0.0--10.255.255.255 172.16.0.0--172.31.255.255 192.168.0.0--192.168.255.25 ...

  3. LVS集群ipvsadm命令和调度算法（6）

    一.ipvsadm命令参考 为了更好的让大家理解这份命令手册,将手册里面用到的几个术语先简单的介绍一下: 术语解释: 1.virtual-service-address:是指虚拟服务器的ip地址2.r ...

  4. SpringBoot（四）之thymeleaf的使用

    这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎. thymeleaf介绍 简单说, Th ...

  5. x64_dbg破解64位WinSnap4.5.6图文视频教程

    一.软件简单介绍: WinSnap是一个轻巧.快速.简单.友好的截图工具,提供屏幕截图和图像编辑功能.和其它截图软件相比其最大亮点在于WinSnap可以捕获或去除Win7的 Aero玻璃效果.WinS ...

  6. hackerrank Alex对战Fedor

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

  7. 2017ecjtu-summer training #1 UVA 12050

    A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example, th ...

  8. hdu_2089(数位dp)

    hdu_2089(数位dp) 标签: dp 我初次接触数位dp表面上看上去挺简单,但是仔细学还是要考虑很多细节的.wa了无数次,这里引入一个 很好地博客 #include<cstdio> ...

  9. 解决在SecurecCRT登录后，发现方向键、backspace(退格键)、delete(删除键)为乱码的问题

    问题:使用securecrt ssh到linux之后,backspace(退格键),delete(删除键),以及4个方向键都为乱码,不能正常使用.按tab键也没有自动补全文件名. 即: 按Backsp ...

  10. c语言基础学习09_关于复合类型的复习

    =============================================================================struct A{ char array[10 ...