jQuery.reveal弹出层使用

时间 2019-11-17

标签 jquery.reveal jquery reveal 弹出使用栏目 JQuery 繁體版

原文原文链接

最近用到弹出层，还得自定义UI，本来用的artDialog太庞大，不合适了，因而就找到了这个东西，又小又好用，基础的弹出遮罩都有了，想要什么还不是Coder本身说了算。javascript

这个插件是基于Jquery实现的，很是小，插件自己只有3K多一点，用起来也算简单明了。css

废话不说了。上Demohtml

首先是引用部分：java

Html->head：jquery

<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">&#215;</a>
</div>

这个a标签是用来显示弹出层的，div就是要弹出的层，层里面须要什么东西，长成什么样子就看我的的需求了。spa

其中：插件

　　1.a标签中的data-reveal-id属性的值必需要与须要弹出的层的id对应，这里只能使用id，使用其余定位符就很差用了。code

　　2.a标签中的data-animation属性设置的是弹出方式，有三种属性能够选，fade, fadeAndPop, none，分别对应不一样的动画效果，固然最后一个实参none就是没有动画效果了，通常推荐使用fade，其余的各位能够尝试下，大同小异，看我的喜爱，通过与UED人员讨论，结果是三种方式对于用户体验的影响不大，这里就仁者见仁智者见智了。

　　三、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，你们须要的话自行下载或者联系我直接发给你，本人比较懒，没有随手作压缩包的习惯，各位轻喷。