当前位置: 首页 > 编程笔记 >

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

宇文峰
2023-03-14
本文向大家介绍jQuery代码实现对话框右上角菜单带关闭×,包括了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">&#215;</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实现左右滑动菜单效果代码,包括了jquery实现左右滑动菜单效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery实现左右滑动菜单效果代码。分享给大家供大家参考。具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候

  • 我正在使用Dojo创建一个简单的对话框,以便在系统中创建用户。问题是我得到了错误: ,是一个Dojo按钮,我必须完成对话框内的表单。当我通过单击它并提交表单关闭对话框时,再次打开对话框没有问题(在按钮上的单击事件中,我有这行代码: 但是如果我通过右上角的[x]-链接/按钮关闭对话框,我不会破坏按钮,然后在不重新加载页面的情况下无法再次打开对话框。 单击事件重载按钮[I如何获取/销毁]按钮来销毁事件

  • 本文向大家介绍Android悬浮对话框(即点即关对话框)实现代码,包括了Android悬浮对话框(即点即关对话框)实现代码的使用技巧和注意事项,需要的朋友参考一下 Activity是Android系统的4个应用程序组件之一。通过传统方法显示的Activity都是充满整个屏幕,也就是全屏的Activity。事实上,Activity不仅可以全屏显示,还可以象对话框一样直接显示在屏幕上。而且可以通过单击

  • 本文向大家介绍jquery实现右键菜单插件,包括了jquery实现右键菜单插件的使用技巧和注意事项,需要的朋友参考一下 今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容。这样可以拓展右键的功能。实现过程不多说了,写出来的代码和效果如下: js部分: css部分代码如下: 创建调用代码如下: 销毁调用代码如下: 效果如下: 调用

  • 本文向大家介绍jQuery实现带滑动条的菜单效果代码,包括了jQuery实现带滑动条的菜单效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现带滑动条的菜单效果代码。分享给大家供大家参考。具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对

  • 本文向大家介绍jQuery实现三级菜单的代码,包括了jQuery实现三级菜单的代码的使用技巧和注意事项,需要的朋友参考一下 上周新接手一个网站建设的活儿,其中有需要要jquery代码实现三级菜单的需求,其实说难也不难,下面小编把代码分享给大家,供大家参考。 先给大家展示下效果图,如果大家感觉还不错的话,请参考实现代码。 HTML代码: js代码: css代码: 以上内容是小编给大家介绍的jQuer