jQuery代码实现对话框右上角菜单带关闭×


Posted in Javascript onMay 03, 2016

先给大家展示下效果图,具体效果图如下所示,如果大家觉得还不错,请参考实现代码:

jQuery代码实现对话框右上角菜单带关闭×

代码如下:

<!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>

以上所述是小编给大家介绍的jQuery代码实现对话框右上角菜单带关闭×的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
JS的get和set使用示例
Feb 20 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
Three.js基础部分学习
Jan 08 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 #Javascript
搞定immutable.js详细说明
May 02 #Javascript
Immutable 在 JavaScript 中的应用
May 02 #Javascript
基于javascript数组实现图片轮播
May 02 #Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 #Javascript
bootstrap3 兼容IE8浏览器!
May 02 #Javascript
javascript实现列表切换效果
May 02 #Javascript
You might like
完美解决PHP中文乱码
2009/11/26 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
JS实现动态星空背景效果
2019/11/01 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
python 布尔操作实现代码
2013/03/23 Python
详解在Python中处理异常的教程
2015/05/24 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
普通院校学生的自荐信
2013/11/27 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
租房协议书范本
2014/04/09 职场文书
联片教研活动总结
2014/07/01 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
面试感谢信范文
2015/01/22 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
小学大队长竞选稿
2015/11/20 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python