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. 解读ASP.NET 5 & MVC6系列（6）：Middleware详解

    在第1章项目结构分析中,我们提到Startup.cs作为整个程序的入口点,等同于传统的Global.asax文件,即:用于初始化系统级的信息(例如,MVC中的路由配置).本章我们就来一一分析,在这里如 ...

  2. HaProxy配置

    安装 http://www.cnblogs.com/wang1988ming/archive/2012/10/24/2737507.html 配置 global log 127.0.0.1 local ...

  3. ReactJs笔记

    中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html

  4. iOS开发系列--C语言之指针

    概览 指针是C语言的精髓,但是很多初学者往往对于指针的概念并不深刻,以至于学完之后随着时间的推移越来越模糊,感觉指针难以掌握,本文通过简单的例子试图将指针解释清楚,今天的重点有几个方面: 什么是指针 ...

  5. clojure基础入门(一)

    最近在看storm的源码,就学习分享下clojure语法. 阅读目录: 概述 变量 运算符 流程控制 总结 概述 clojure是一种运行在JVM上的Lisp方言,属于函数式编程范式,它和java可以 ...

  6. C语言 · 未名湖边的烦恼

    问题描述 每年冬天,北大未名湖上都是滑冰的好地方.北大体育组准备了许多冰鞋,可是人太多了,每天下午收工后,常常一双冰鞋都不剩. 每天早上,租鞋窗口都会排起长龙,假设有还鞋的m个,有需要租鞋的n个.现在 ...

  7. ASP.NET Web.config

    分析: .NET Web 应用程序的配置信息(如最常用的设置ASP.Net Web 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中.当你通过VB.NET新 建 一个Web应用程序后,默认 ...

  8. maven pom中的repository节点配置没有起作用

    问题描述 昨天晚上想用spring boot快速搭建一个web开发的项目,就打开spring boot的doc,按照说明开始尝试.没想到出师未捷身先死,第一步就挂了. 以下是spring boot的配 ...

  9. T型及Fly_by拓扑之应用总结

    前面的文章有分别介绍过T型拓扑及Fly_by拓扑结构,这两种拓扑结构应用最多的应该是在DDR3里面,说到这里,小编又想开始聊聊DDR3的设计了,我想很多人都比较有兴趣. 因为DDR3的设计还是比较复杂 ...

  10. oracle数据库表的导入导出cmd命令大全

    在实际的项目开发中经常会遇到导入导出oracle数据库中的表,以下是常用的一些cmd命令: 一.数据表的导出 1 将数据库TEST完全导出,用户名system 密码manager 导出到D:daoch ...