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. Web打印组件jatoolsPrinter

    应用web化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于web的应用,客户端的规则很简单,容易学习,容易维护,容易发布.但对程序员来说,因为浏览器的局限性,却要面对很多挑战.怎么样 ...

  2. ENode框架使用场景简述

    ENode是一个.NET平台下,纯C#开发的,基于DDD,CQRS,ES,EDA,In-Memory架构风格的,可以帮助开发者开发高并发.高吞吐.可伸缩.可扩展的应用程序. 开源项目地址:https: ...

  3. 剑指Offer面试题：2.二维数组中的查找

    一.题目:二维数组中的查找 题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...

  4. 免安裝、免設定的 Hadoop 開發環境 - cloudera 的 QuickStart VM

    cloudera 的 QuickStart VM,為一種免安裝.免設定 Linux 及 Hadoop,已幫你建好 CDH 5.x.Hadoop.Eclipse 的一個虛擬機環境.下載後解壓縮,可直接以 ...

  5. 【PRINCE2是什么】PRINCE2认证之七大原则（3）

    我们先来回顾一下,PRINCE2七大原则分别是持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁. 第三个原则:明确定义的角色和职责. 项目离不开人员,错误的人来了,合适的人没 ...

  6. C#设计模式-代理模式

    在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代理对象代替 ...

  7. 路由转发过程的IP及MAC地址变化

    A-----(B1-B2)-----(C1-C2)-------E就假设拓扑图是这个样子吧,B1和B2是路由器B上的两个接口,C1和C2是路由器C上的两个接口,A和E是PC,由主机A向主机E发送数据包 ...

  8. WPF 后台读取样式文件

    ResourceDictionary dic = new ResourceDictionary { Source = new Uri("Styles.xaml",UriKind.R ...

  9. js的作业题

    <script type="text/javascript"> //var a=3; //switch(a) // { // case 1: // alert(&quo ...

  10. Android okHttp网络请求之Retrofit+Okhttp+RxJava组合

    前言: 通过上面的学习,我们不难发现单纯使用okHttp来作为网络库还是多多少少有那么一点点不太方便,而且还需自己来管理接口,对于接口的使用的是哪种请求方式也不能一目了然,出于这个目的接下来学习一下R ...