JQuery弹框,自定义弹窗

时间:2022-06-15 20:36:17

因为项目要用到弹框,所以就在网上搜了一下关于JQuery弹框,推荐使用artDialog的JQuery插件,就学习了用法。找了一下,没有针对我这种菜鸟级的,试了几次,试出来了。下面是分享一下我学习过程。如果你和我一样也是想找应用JQuery在页面弹窗口的话,这个是入门级的很适合你的。

1.下载artDialog的插件包http://dimp.tiens.com/DIMPB2C%20-%20%E5%89%AF%E6%9C%AC/artDialog4.1.5/_doc/log.html  这个网站还提供了很详细的应用说明,点击“文档”菜单,往下浏览就可以看到网站给的例子,点击运行即可查看。

2..创建一个web工程,在webRoot目录下新建一个JSP页面,在该页面创建一个按钮,绑定事件

3.如何添加包?是重点,在已经下载好的压缩包中,加压,当前文件夹就可以看到:jquery.artDialog.js和skins等目录。

                        下面添加包:在web工程下新建JS文件夹,将你用的JQuery对应的包、jquery.artDialog.js文件、skins文件复制到该文件夹下,在JSP页面的head标签内插入,即:

               <script type="text/javascript" src="JS/jquery-1.11.2.js"></script>

              <script src="JS/jquery.artDialog.js?skin=default"></script>

skins文件夹放入js文件夹中即可,不需要其他的操作。

4.在js代码中赋值文档下的例子,启动服务器,访问该页面,点击按钮即可看到弹出的artDialog窗口。比如我复制的是:

      var dialog = art.dialog({
    title: '登录',
    content: '欢迎使用artDialog对话框组件!',
    icon: 'succeed',
    follow: document.getElementById('btn2'),
    ok: function(){
        this.title('警告').content('请注意artDialog两秒后将关闭!').lock().time(2);
        return false;
    }
});

(在添加好文件后,直接复制,粘贴即可,不需要其他的操作,就可以完成弹框)

如果没有出结果,可能的原因就是你没有导入JQuery或jquery.artDialog.js文件或是你没在head标签中添加相应的导包语句。skins文件夹不复制则会使弹出的框的格式不对。

那么关于art.dialog({});中的属性设置,可以使弹出的框包含HTML标签,修改背景色,修改图标等等功能,读者可以参考官方的文档,我就不多说了。

下面是我的目录结构:JQuery弹框,自定义弹窗