jQuery弹出可关闭遮罩层：http://hovertree.com/texiao/layer/1/

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>jQuery对话框右上角带关闭× - 何问起</title><base target="_blank" />

<!-- Attach our CSS -->

<link rel="stylesheet" href="http://hovertree.com/texiao/layer/1/reveal.css">

<!-- Attach necessary scripts -->

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="http://hovertree.com/texiao/layer/1/jquery.reveal.js"></script>

<style type="text/css">

body {

font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif;

}

.big-link {

display: block;

margin-top: 50px;

text-align: center;

font-size: 30px;

background-color:#eeeeee;

color: #06f;

}

.hovertreeinfo{text-align:center;} .hovertreeinfo a{color:darkcyan;}

</style>

</head>

<body>

<div class="hovertreeinfo">

<h1>jQuery弹出可关闭层提示框</h1>

</div>

<a href="http://hovertree.com/h/bjaf/ati6k7yk.htm" class="big-link" data-reveal-id="myModal">

Demo 1

</a>

<a href="http://hovertree.com/hvtart/bjae/lhnydfey.htm" class="big-link" data-reveal-id="myModal" data-animation="fade">

Demo 2

</a>

<a href="http://hovertree.com/hvtart/bjae/vgte3y3a.htm" class="big-link" data-reveal-id="myModal" data-animation="none">

Demo 3

</a>

<div id="myModal" class="reveal-modal">

<h1>jquery导出层</h1>

<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

推荐使用Demo 1，和Demo 3两种方式。何问起 hovertree.com

</p>

<a class="close-reveal-modal">×</a>

</div>

<div class="hovertreeinfo">推荐使用Demo 1，和Demo 3两种方式.

<br />

<a href="http://hovertree.com/h/bjaf/tishiceng.htm">原文</a> <a href="http://hovertree.com">首页</a>

<a href="http://hovertree.com/texiao/">特效</a>

<br />by 何问起

hovertree.com

<br />

<!--<img src="http://hovertree.com/texiao/layer/1/modal-gloss.png" />-->

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/tishiceng.htm

特效库：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery对话框右上角带关闭×的更多相关文章

  1. Jquery对话框基本配置

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px ...

  2. 炫酷的jQuery对话框插gDialog

    js有alert,prompt和confirm对话框,不过不是很美体验也不是很好,用jQuery也能实现, 体验效果:http://hovertree.com/texiao/jquery/34/ 代码 ...

  3. WPF 右上角带数字的按钮

    效果如图所示 三种方案, 1:不改控件模版,布局实现,死开 2:改button模版,利用附加属性,附加附加属性,功能多了话,不利于拓展 3:继承button,添加依赖属性,接下来是这种 1:新建类 为 ...

  4. jquery弹出可关闭遮罩提示框

    jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 效果展示 http://hovertree.com ...

  5. jQuery对话框插件 ThickBox

    http://baike.haosou.com/doc/7607201-7881296.html 项目已经停止维护,但该插件还是不错的! ThickBox是一个基于JQuery类库的扩展,它能在浏览器 ...

  6. VC++ MFC子对话框建立与关闭

    主窗体 void CMoshiwindowDlg::OnButton1() { // TODO: Add your control notification handler code here CDi ...

  7. jQuery EasyUI实现全部关闭tabs

    有时,当我们打开很多tabs当标签,要关闭一个接一个,它只能被关停 显然太麻烦,能够在选项卡的最右边加入一个button 实现关闭所有. 代码例如以下: <!DOCTYPE HTML PUBLI ...

  8. 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件

    当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...

  9. JQuery弹出Dialog关闭方式close vs destroy

    $editDialog.iDialog('close')  $(this).dialog('close'); 等Close方法关闭Dialog时,Dialog并不是完全消失,只是隐藏起来.两个Dial ...

随机推荐

  1. SSRS(rdl报表)分页显示表头和对表头的冻结处理

    基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...

  2. Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的？

    构成ASP.NET Web API核心框架的消息处理管道既不关心请求消息来源于何处,也不需要考虑响应消息归于何方.当我们采用Web Host模式将一个ASP.NET应用作为目标Web API的宿主时, ...

  3. [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一.

    在这里一下讲解着三个的安装和配置, 是因为solr需要使用tomcat和IK分词器, 这里会通过图文教程的形式来详解它们的安装和使用.注: 本文属于原创文章, 如若转载,请注明出处, 谢谢.关于设置I ...

  4. Java Thread 的 run() 与 start() 的区别

    Java Thread 的使用 Java Thread 的 run() 与 start() 的区别 Java Thread 的 sleep() 和 wait() 的区别             1. ...

  5. iOS中怎么存储照片到自定义相册

    在市场上主流App中,大多数App都具有存储图片到自己App的相册中.苹果提供的方法只能存储图片到系统相册,下面讲一下怎么实现: 实现思路:  1.对系统相册进行操作的前提必须导入#import &l ...

  6. css知多少（6）——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  7. 为什么要学习Linux

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 本篇修改自我在知乎上回答的问题,为什么要学习 Linux? 我最开始用Linux是 ...

  8. MySQL中有关TIMESTAMP和DATETIME的总结

    一.MySQL中如何表示当前时间? 其实,表达方式还是蛮多的,汇总如下: CURRENT_TIMESTAMP CURRENT_TIMESTAMP() NOW() LOCALTIME LOCALTIME ...

  9. 如何用Perl截取报文

    在实际生产环境中,常常需要从后台日志中截取报文,报文的形式类似于 <InterBOSS> ... ... ... </InterBOSS> 一个后台日志有多个报文,每个报文可由 ...

  10. geotrellis使用（九）使用geotrellis进行栅格渲染

    目录 前言 图像渲染 总结 参考链接 一.前言        前面几篇文章讲解了如何使用Geotrellis进行数据处理.瓦片生成等,今天主要表一下如何使用Geotrellis进行栅格渲染.     ...