jQuery Reveal从顶部滑出(弹出)对话框插件 - 文章教程

jQuery Reveal从顶部滑出(弹出)对话框插件

发布于 2018-04-13 字数 1416 浏览 2121 评论 0

jQuery reveal 是一款滑出弹出层表单的插件,鼠标点击文字链接滑动弹出层显示隐藏。效果非常的好,很多网站都在使用,特别适合登陆注册一类的对话框效果制作。

jQuery Reveal从顶部滑出(弹出)对话框插件

使用方法

1、首先引入 jQuery库和 reveal 插件文件

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>

2、引入reveal css文件

<link rel="stylesheet" href="reveal.css">

3、给触发弹出窗口的 html 标签添加 data-reveal-id=”myModal” 属性,其中 myModal 是弹出窗口的 ID,这个值可以是您自定义的任意值。

<a href="#" data-reveal-id="myModal"> Launch The Modal </a>

4、给弹出窗口标签添加上一步中 data-reveal-id 属性的值,给关闭按钮添加 class=”close-reveal-modal” 属性。

<div id="myModal">
    <h1>Reveal Modal Goodness</h1>
    <p>This is a default modal in all its glory,
       but any of the styles here can easily be changed in the CSS.</p>
    <a>&#215;</a>
</div>

就是这样就成功了,这个插件不同于其它 jQuery 插件,不需要你书写js代码,可以说非常的方便和实用。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论