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 typeof 用法
Dec 28 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
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版(5)
2006/10/09 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
Python类定义和类继承详解
2015/05/08 Python
Python实现简单字典树的方法
2016/04/29 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
应届生英语教师求职信
2013/11/05 职场文书
高中自我评价分享
2013/12/05 职场文书
七匹狼男装广告词
2014/03/21 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
结对共建工作方案
2014/06/02 职场文书
网站出售协议书范文
2014/10/10 职场文书
2015年国培研修感言
2015/08/01 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技