jQuery Reveal从顶部滑出（弹出）对话框插件

  • Z时代
  • 2024-01-10
  • 分类：IT

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>×</a>
</div>

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

以上是 jQuery Reveal从顶部滑出（弹出）对话框插件 的全部内容， 来源链接： utcz.com/p/231853.html

回到顶部