JQuery弹框，自定义弹窗

时间：2022-05-14 16:24:58

因为项目要用到弹框，所以就在网上搜了一下关于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弹框，自定义弹窗



标签：

相关文章