artDialog使用

最新推荐文章于 2025-06-12 09:10:46 发布

peach_li

最新推荐文章于 2025-06-12 09:10:46 发布

阅读量729

点赞数

CC 4.0 BY-SA版权

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/u010305706/article/details/48014495

artDialog是一个精巧的web对话框组件，压缩后只有十多KB，并且不依赖其他框架。

现在我来教大家如何在项目去使用它

首先你要获得这个组件

http://www.onlinedown.net/softdown/468295_2.htm
下载，解压到指定目录

目录如下
这里写图片描述

导入项目

其中./Extend/artdialog/为存放目录
?skin=default，skin=皮肤，这里的皮肤指的是在skins目录下对应的.css文件
代码如下：（注意我把文件夹解压并新建了文件夹名称为artdialog）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<script type ="text/javascript" src="**./artdialog/**artDialog.js?skin=default"></script>
<script language="javascript">

function btnaa(){
var dialog = art.dialog({
    title: '报警',
    content: '您的云主机报警了',
    icon: 'succeed',
    follow: document.getElementById('btn2'),
    ok: function(){
        this.title('警告').content('请注意artDialog两秒后将关闭！').lock().time(2);
        return false;
    },okVal: '确定',
      cancelVal: '关闭',
    cancel: function(){
    console.log(123);
    },fixed:true,
    resize:true
});
}
</script>
</head>
<body>
<input type="button" value="123" onclick="btnaa()" id="btn2">
</body>
</html>

结果：

这里写图片描述