一款简约的基于原生Javascript 的消息提示插件(带错误提示音)。包含功能,函数回调,自动关闭 ,手动关闭 ,错误提示音,loading,closeAll等。
CSS代码:
/**按钮弹窗CSS**/
#dream {
margin:0 auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position:absolute;
top:50%;
}
#dream button {
margin: 0 20px;
}
.dream-btn {
font-size: 12px;
text-decoration: none;
white-space: nowrap;
border-radius: 5px;
font-weight: 500;
display: inline-block;
cursor: pointer;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
line-height: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dream-btn.cancel {
margin-right: 10px;
color: #525456;
background-color: transparent;
font-weight: 500;
transition: all 0.06s ease-out;
}
.dream-btn,
.dream-btn span{
position: relative;
font-size: 12px;
font-weight: bold;
}
.dream-btn.info {
background-color: #47d4cd;
color: #fefefe;
}
.dream-btn.success {
background-color: #9edc65;
color: #fefefe;
}
.dream-btn.warning {
background-color: #e5b442;
color: #fefefe;
}
.dream-btn.error {
background-color: #ec4141;
color: #fefefe;
}
.dream-btn.loading {
background-color: #7bb4e7;
color: #fefefe;
}
.dream-btn.close {
background-color: #676868;
color: #fefefe;
}
.dream-btn.ok::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
transition: all 0.12s ease-out;
background-color: transparent;
}
.dream-btn.ok:hover::before {
background-color: rgba(255, 255, 255, 0.08);
}
.dream-btn.ok:active::before {
transition: all 80ms ease-out;
background-color: rgba(0, 0, 0, 0.2);
}
Html代码:
<button id="dream-success" class="dream-btn success">入冬礼包</button>
<button id="dream-warning" class="dream-btn warning">TV秀</button>
<button id="dream-loading" class="dream-btn loading">加群</button>
<button id="dream-error" class="dream-btn error">邂逅</button>
<button class="dream-btn success" id="dream-info">说明</button>
<button class="dream-btn success"><a href="https://up.pcno.cn/mp3/">音乐</a></button>
JS代码:
<script src="https://cdn.jsdelivr.net/gh/iGaoWei/Dream-Msg/lib/dream-msg.min.js"></script>
<script>
var info = document.getElementById("dream-info");
var success = document.getElementById("dream-success");
var error = document.getElementById("dream-error");
var loading = document.getElementById("dream-loading");
var warning = document.getElementById("dream-warning");
info.onclick = function(){
Dreamer.info("在美图贴吧 发表图贴,被版主加精后,即可在广场上墙显示~");
}
success.onclick = function(){
Dreamer.success("天冷了,记得多添件衣服哦!", 3000,function () {
alert("点击领取入冬礼包"),location.href="https://www.tx3gqq.com/bbs/hzck.html?act=2";
});
}
warning.onclick = function(){
Dreamer.warning("网站优化中,暂时关闭访问,请移步abcio.cn!",4000,true);
}
error.onclick = function(){
Dreamer.error("对不起,你命中注定的Ta还没有出现哦!", 3000,true);
}
loading.onclick = function(){
var closeMsg = Dreamer.loading("欢迎来到清墨的橘个人博客");
setTimeout(function () {
closeMsg();
}, 4000);
}
</script>
函数解释
**info**
// 默认
Dreamer.info("您有一条新消息待处理,请及时查收!");
//函数回调
Dreamer.info("您有一条新消息待处理,请及时查收!",function () {
alert("我是自定义事件");
});
//手动关闭
Dreamer.info("您有一条新消息待处理,请及时查收!",0);
//自动关闭
Dreamer.info("您有一条新消息待处理,请及时查收!",2000);
//提示音
Dreamer.info("您有一条新消息待处理,请及时查收!",true);
**success**
// 默认
Dreamer.success("密码修改成功请重新登录!");
//函数回调
Dreamer.success("密码修改成功请重新登录!",function () {
alert("我是自定义事件");
});
//手动关闭
Dreamer.success("密码修改成功请重新登录!",0);
//自动关闭
Dreamer.success("密码修改成功请重新登录!",2000);
//提示音
Dreamer.success("密码修改成功请重新登录!",true);
**warning**
// 默认
Dreamer.warning("系统异常这是一条警告信息!");
//函数回调
Dreamer.warning("系统异常这是一条警告信息!",function () {
alert("我是自定义事件");
});
//手动关闭
Dreamer.warning("系统异常这是一条警告信息!",0);
//自动关闭
Dreamer.warning("系统异常这是一条警告信息!",2000);
//提示音
Dreamer.warning("系统异常这是一条警告信息!",true);
**error**
// 默认
Dreamer.error("添加失败,请稍后再试!");
//函数回调
Dreamer.error("添加失败,请稍后再试!",function () {
alert("我是自定义事件");
});
//手动关闭
Dreamer.error("添加失败,请稍后再试!",0);
//自动关闭
Dreamer.error("添加失败,请稍后再试!",2000);
//提示音
Dreamer.error("添加失败,请稍后再试!",true);
**loading**
// 默认
Dreamer.loading("加载中,请稍后")
//自动关闭
var closeMsg = Dreamer.loading("加载中,请稍后");
setTimeout(function(){
closeMsg();
}, 4000);
**closeAll**
Dreamer.destroyAll();
怎么自动触发啊比如打开网站会弹出来欢迎光临
需要点击,自动弹出的话没试过