jQuery.reveal弹出层使用 - 公司荣誉 - 新余市思创暖通工贸有限公司
现在的位置: 主页 > 公司荣誉 > 文章正文
jQuery.reveal弹出层使用
作者:新余市思创暖通工贸有限公司 来源:www.jxsichuang.com 发布时间:2017-09-12 16:31:59
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=""></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就是要弹出的层,层里面需要什么东西,长成什么样子就看个人的需求了。

其中:

  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">&#215;</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,大家需要的话自行下载或者联系我直接发给你,本人比较懒,没有随手做压缩包的习惯,各位轻喷。

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网页设计 https://www.feimao666.com


  • 上一篇:.Net 中DataSet和DataTable的 区别与联系
  • 下一篇:最后一页
  • 
    COPYRIGHT © 2015 新余市思创暖通工贸有限公司 ALL RIGHTS RESERVED.
    本站所有原创信息,未经许可请勿任意转载或复制使用 网站地图 技术支持:肥猫科技
    精彩专题:网站建设
    购买本站友情链接、项目合作请联系客服QQ:2500-38-100