您的位置：首页 > Web前端 > JQuery

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

2016-05-03 00:00 751 查看

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

代码如下：

<!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代码实现对话框右上角菜单带关闭×的相关内容，希望对大家有所帮助！

您可能感兴趣的文章:

jquery 模式对话框终极版实现代码
Confirmer JQuery确认对话框组件
jQuery Dialog 弹出层对话框插件
基于Jquery的开发个代阴影的对话框效果代码
jBox 2.3基于jquery的最新多功能对话框插件常见使用问题解答
jQuery EasyUI API 中文文档 - Dialog对话框
jQuery UI Dialog 创建友好的弹出对话框实现代码
学习从实践开始之jQuery插件开发对话框插件开发
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Jquery实现页面加载时弹出对话框代码
jquery ui对话框实例代码
jQuery Mobile的loading对话框显示/隐藏方法分享
jquery删除提示框弹出是否删除对话框
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
JQuery弹出炫丽对话框的同时让背景变灰色

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 对话框右上角

相关文章推荐

新的分享

章节导航