html5+alert插件,index.html · lifetime have you/炫酷弹窗插件 hsycmsAlert.js - Gitee.com

hsycmsAlert弹窗插件

body,html{ width:100%; height:100%;}

body{ max-width:640px; margin:0 auto;}

.btnss{

display:flex;

height:100%;

justify-items: center;

flex-direction: column;

justify-content: center;

}

.box{ padding:20px; background:#f1f1f1; overflow: hidden; color:#333;}

.box h2{ font-size:16px; padding-bottom:12px;}

.box h3{color:#f54655; font-size:15px;}

.box p{ font-size:14px; color:#444; padding-top:10px;}

.btnss button{ padding:10px; cursor: pointer; height:40px; min-width:120px;border:0; color:#FFF; margin:10px 0; border-radius:40px;}

hsycmsAlert弹窗插件 炫酷动画

普通弹窗

提示弹窗

询问弹窗

Loading

自定义弹窗

成功

失败

使用说明

请将本页面的HMTL结构复制过去
再引入JS文件：jquery.js 和 hsycmsAlert.js
样式文件： hsycmsAlert.css

自定义弹窗

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

这里是自定义的内容

温馨提示

这里是内容

确定

这里是提示内容

温馨提示

确定要操作？

取消

确定

操作成功

操作失败

正在加载

//参数说明 id,文字,方法

//普通弹窗

function alert(txt){

hsycms.alert('alert',txt,function(){

hsycms.close('alert');

console.log("点击了确定");

})

}

//提示弹窗

function tips(txt){

hsycms.tips('tips',txt,function(){

console.log("提示关闭后");

},2000)

}

//询问弹窗

function confirm(){

hsycms.confirm('confirm','确定要这么做',

function(res){

hsycms.success('success','点击了确定');

},

function(res){

hsycms.error('error','点击了取消');

},

)

}

//操作成功调用

function success(){

hsycms.success('success','操作成功',function(){ console.log('操作成功关闭后'); },1800)

}

//操作失败调用

function error(){

hsycms.error('error','操作失败',function(){ console.log('操作失败关闭后'); },1800)

}

//显示loading

function loading(){

hsycms.loading('loading','正在加载');

//2秒后隐藏

setTimeout(res=>{

hsycms.hideLoading('loading');

},2000)

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史