jQuery.reveal弹出层使用
最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算。
这个插件是基于Jquery实现的,非常小,插件本身只有3K多一点,用起来也算简单明了。
废话不说了。上Demo
首先是引用部分:
Html->head:
<head>
<meta charset="utf-8" />
<title>Reveal Demo</title>
<link rel="stylesheet" href="reveal.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style type="text/css">
body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
</style>
</head>
头部所有引用除了jquery都是插件用到的东西,一个css文件,一个js文件,js文件就是插件本体,css是一个预设好的样式,用起来很方便,如果需要可以自行修改。下面的style标签里写的是我自己用到的基本样式,无他。
Html->body:
<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">
Fade
</a>
<div id="myModal" class="reveal-modal">
<h1>test</h1>
<a class="close-reveal-modal">×</a>
</div>
这个a标签是用来显示弹出层的,div就是要弹出的层,层里面需要什么东西,长成什么样子就看个人的需求了。
其中:
1.a标签中的data-reveal-id属性的值必须要与需要弹出的层的id对应,这里只能使用id,使用其他定位符就不好用了。
2.a标签中的data-animation属性设置的是弹出方式,有三种属性可以选,fade, fadeAndPop, none,分别对应不同的动画效果,当然最后一个实参none就是没有动画效果了,一般推荐使用fade,其他的各位可以尝试下,大同小异,看个人喜好,经过与UED人员讨论,结果是三种方式对于用户体验的影响不大,这里就仁者见仁智者见智了。
3、div标签中的id属性必须要设置,并与a标签中的data-reveal-id属性对应,这是一个基于Jquery的选择器方式,这里不再赘述这个问题了,不明白选择器的可以自行百度w3c School里去学习。
4.<a class="close-reveal-modal">×</a>这一行代码是预设好的样式,在弹出层右上角会有一个关闭按钮,并已经写好了关闭弹出层的关闭事件,相信一般大家都是需要的吧,当然也可以自定义。
JS插件本体没什么好说的,实际上就是基于Jquery的一系列操作和方法,方式还是拼装html这种很原始的方式,所以兼容性方面不用考虑很多。这里只把经常需要设置的东西列出来。
var defaults = {
animation: 'fade', //可选模式为三种:fade, fadeAndPop, none
animationspeed: 300, //动画效果速度
closeonbackgroundclick: true, //设置点击模态化背景时是否关闭弹出层
dismissmodalclass: 'close-reveal-modal' //设置关闭关闭的样式
};
代码注释都在,不需要解释了。
其他的东西常规情况下都不需要变动,根据个人情况而定吧。这个插件使用非常简单,想来想去都没必要再弄个演示啥的,如果哪位朋友真需要的话直接联系我给你发吧。
插件本身有很强的自定义性,样式,表现方式都可以自己定义,小弟因为css功力实在是见不得人,这里就不献丑了,各位自己做样式吧。
插件的js和css文件在我的空间里都有,名称分别为:jquery.reveal.js和reveal.css,大家需要的话自行下载或者联系我直接发给你,本人比较懒,没有随手做压缩包的习惯,各位轻喷。
jQuery.reveal弹出层使用的更多相关文章
- jQuery.reveal弹出层
jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
- jquery 简单弹出层
预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...
- 用jQuery解决弹出层的问题
在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...
- jquery智能弹出层,自己主动推断位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery layer弹出层插件 http://layer.layui.com/直接上官网学
在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...
- 写了一个jquery的 弹出层插件。
下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件 参数(option): widt ...
随机推荐
- PageRank算法MapReduce实现
如果你现在需要计算网页的排名只有4一:数据如下面的: baidu 10.00 google,sina,nefu google 10.00 baidu sina 10.00 google nefu 10 ...
- IOSi科研OS7
具体的使用说明的适应
新近.我进行了项目iOS7适应,它有没有用7.0SDK它是由于老project采用iOS7.0存在一些问题,以这个机会,我专门整理改编iOS7需要注意的几个地方. 记录,如下面: 一,iOS7 ...
- 懒人模式Singleton模式Meyers版本号
直接看代码: /* Singleton模式保证:在一个程序,,一个类有且只有一个实例.并提供一个访问 它的全局访问点 在编程其中.很多情况下,需要确保有一类的一个实例 比如: windopws系统中仅 ...
- [Windows Phone] 地图控制项的经纬度
原文:[Windows Phone] 地图控制项的经纬度 前言 本文主要示范如何使用地图经纬度以及显示地标和行人街道,并透过卷轴控制地图缩放比例的功能. ? 实作 step1 建立专案. ? step ...
- hdoj 2102 A计画 【BFS】
称号:hdoj 2102 A计画点击打开链接 意甲冠军:文的就不说了.求救出公主所须要的最短时间,所以用广搜. 分析:读题之后不难做,比一般的题目多了一个条件就是能够传送,那么我们能够在广搜里面加一个 ...
- strategy pattern
- centos7安装并配置svn(转)
一.安装 1. 通过 yum install subversion来安装 2. 查看svn版本 使用: svnserve –version 3. 创建svn版本库 使用命令: svnadmin cre ...
- Lua 脚本语法说明(转)
Lua脚本语法说明(增加lua5.1部份特性) Lua 的语法比较简单,学习起来也比较省力,但功能却并不弱. 所以,我只简单的归纳一下Lua的一些语法规则,使用起来方便好查就可以了.估计看完了,就懂得 ...
- Unity3d该物业(Attributes)整理
http://blog.sina.com.cn/s/blog_5b6cb9500101857b.html Attributes属性属于U3D的RunTimeClass,所以加上下面的命名空间是必须的了 ...
- YT新人之巅峰大决战03
题目链接 Problem Description Now give you two integers n m, you just tell me the m-th number after radix ...