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 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
详解vue项目构建与实战
Jun 27 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
微信小程序实现菜单左右联动
May 19 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
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
javascript 自定义事件初探
2009/08/21 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
详解a++和++a的区别
2017/08/30 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Python读写Excel文件的实例
2013/11/01 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python3 max()函数基础用法
2019/02/19 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python pip配置国内源的方法
2020/02/14 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
python opencv实现简易画图板
2020/08/27 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
数据员岗位职责
2013/11/19 职场文书
学习教师法的心得体会
2014/09/03 职场文书
观看信仰心得体会
2014/09/04 职场文书
校园开放日新闻稿
2015/07/17 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL