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弹出层的更多相关文章

  1. jQuery.reveal弹出层使用

    最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...

  2. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  3. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  4. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  5. jquery 简单弹出层

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...

  6. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  7. jquery智能弹出层，自己主动推断位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  9. 写了一个jquery的 弹出层插件。

    下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件  参数(option): widt ...

随机推荐

  1. Chromium

    Chromium多进程架构 多进程架构 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//Start_Here_Bac ...

  2. springmvc+mongodb+maven 项目测试代码

    你看我有一篇文章配置,或许还会有.mongodb性能测试结果.一个"快"字 源代码包,请留下邮箱 代码结构图 watermark/2/text/aHR0cDovL2Jsb2cuY3 ...

  3. 栈实现java

    栈是一种“先去后出”的抽象的数据结构.例如:我们在洗盘子的时候,洗完一个盘子,将其放在一摞盘子的最上面,但我们全部洗完后,要是有盘子时,我们会先从最上面的盘子开始使用,这种例子就像栈的数据结构一样,先 ...

  4. 使用CMakeLists.txt 判断编译器是否支持C++11

    #将下面的内容添加到CMakeLists.txt当中include(CheckCXXCompilerFlag) CHECK_CXX_COMPILER_FLAG("-std=c++11&quo ...

  5. 重新想象 Windows 8 Store Apps (22) - 文件系统: 访问文件夹和文件, 通过 AQS 搜索本地文件

    原文:重新想象 Windows 8 Store Apps (22) - 文件系统: 访问文件夹和文件, 通过 AQS 搜索本地文件 [源码下载] 重新想象 Windows 8 Store Apps ( ...

  6. 左右xcode的重构选项的一些理解

    Rename(重命名):对标示符进行重命名,以获得更好的代码可读性,这些标示符包含类,方法或者函数的名称. Extract(抽取):将你在XCode种选择的代码抽取到一个新的方法或函数中. Creat ...

  7. Android学习路径（十）如何将Action Bar堆放在布局

    默认情况下,action bar出如今activity窗体的顶部,稍微降低了activity布局的总空间.假设你想隐藏或者显示action bar,在这堂用户体验的课程中,你能够通过调用hide()  ...

  8. 【程序员联盟】官网上线啦！coderunity.com

    内容简介 欢天喜地,[程序员联盟]官网上线咯(此处应该有鸡蛋丢过来...) [程序员联盟]官网 大家也许会问:“这几天小编都没出文章,跑哪里happy去啦?是不是偷懒去了?” 小编:“臣妾冤枉啊.” ...

  9. $.ajax通路RESTful Web Service一个错误:Unsupported Media Type

    最近项目,使用头版jquery ajax访问背景CXF发布时间rest维修,结果遇到了错误"Unsupported Media Type". 公布的服务java代码例如以下: im ...

  10. WebxFrameworkFilter 请求响应过程

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTFRpYW5jaGFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...