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中实现块作用域的方法
Apr 01 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JS打印组合功能
Aug 04 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 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
模仿OSO的论坛(二)
2006/10/09 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
解析php5配置使用pdo
2013/07/03 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python判断完全平方数的方法
2018/11/13 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
理货员的岗位职责
2013/11/23 职场文书
大学生表扬信范文
2014/01/09 职场文书
超市重阳节活动方案
2014/02/10 职场文书
商业街策划方案
2014/05/31 职场文书
学校师德师风整改措施
2014/10/27 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL