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. .net core中使用openssl的公钥私钥进行加解密

    这篇博文分享的是 C#中使用OpenSSL的公钥加密/私钥解密 一文中的解决方法在 .net core 中的改进.之前的博文针对的是 .NET Framework ,加解密用的是 RSACryptoS ...

  2. 【java并发编程实战】-----线程基本概念

    学习Java并发已经有一个多月了,感觉有些东西学习一会儿了就会忘记,做了一些笔记但是不系统,对于Java并发这么大的"系统",需要自己好好总结.整理才能征服它.希望同仁们一起来学习 ...

  3. K-均值聚类算法

    K-均值聚类算法 聚类是一种无监督的学习算法,它将相似的数据归纳到同一簇中.K-均值是因为它可以按照k个不同的簇来分类,并且不同的簇中心采用簇中所含的均值计算而成. K-均值算法 算法思想 K-均值是 ...

  4. 深入挖掘.NET序列化机制——实现更易用的序列化方案

    .NET框架为程序员提供了“序列化和反序列化”这一有力的工具,使用它,我们能很容易的将内存中的对象图转化为字节流,并在需要的时候再将其恢复.这一技术的典型应用场景包括[1] : 应用程序运行状态的持久 ...

  5. ystep jQuery流程、步骤插件

    今天小菜给大家带来又一款给力jQuery插件:ystep. 从名称上大致可以看出,这是一个流程步骤插件. 如果无意外的话,这可能是小菜近期最后一个作品了...苦逼的小菜即将创业,可能就没时间折腾啦~好 ...

  6. Windows Azure Storage (20) 使用Azure File实现共享文件夹

    <Windows Azure Platform 系列文章目录> Update 2016-4-14.在Azure VM配置FTP和IIS,请参考: http://blogs.iis.net/ ...

  7. Ajax_04之jQuery中封装的Ajax函数

    1.PHP中json_encode编码规则: PHP索引数组编码为JSON:[...] PHP关联数组编码为JSON:{...}2.jQuery中AJAX封装函数之load: ①使用:$('选择器') ...

  8. 在微软伪静态处理机制下action导致伪静态的地址重现的问题

    伪静态前的地址:/sc/ProductList.aspx?pClass=0&descType=2&minPrice=1&maxPrice=11 伪静态后的地址:/product ...

  9. CSS系列：CSS表格样式

    1. 设置单元格的边框 border-collapse: collapse; 2. 边框的分离 对table使用CSS实现cellspacing的属性border-spacing. border-sp ...

  10. Android NDK开发Hello Word!

    在之前的博客中已经为大家介绍了,如何在win环境下配置DNK程序,本篇我将带大家实现一个简单的Hello jni程序,让大家真正感受一下NDK开发的魅力.这里我们选择使用C+JAVA开发Android ...