一款简洁的jQuery弹窗插件dialog,13种样式可供使用,有的可以自定义标题、描述内容,还可以自定义遮罩的颜色,动画效果都比较简约大气,使用起来也是比较方便的。
head部分先引入CSS样式和设置容器及触发按钮的样式,可以自由更改元素和样式:
<link type="text/css" rel="stylesheet" href="css/global.css">
<link type="text/css" rel="stylesheet" href="css/dialog.css">
<style>
.div-testDialog{width:500px;height:auto;margin:20px auto;}
.div-testDialog button{margin:6px;}
</style>
body部分分别写好13种触发按钮及绑定onclick事件,代码如下:
<div class="div-testDialog">
<button class="dw-btn has-hover disabled input-reverse-tofull" onclick="javascript:$('body').dailog({type:'defalut'})">默认弹窗</button>
<button class="dw-btn btn-success has-hover" onclick="javascript:$('body').dailog({type:'success'})">成功提示</button>
<button class="dw-btn btn-primary has-hover" onclick="javascript:$('body').dailog({type:'primary'})">初始消息</button>
<button class="dw-btn btn-danger has-hover" onclick="javascript:$('body').dailog({type:'danger'})">危险提示</button>
<button class="dw-btn btn-warning has-hover" onclick="javascript:$('body').dailog({type:'warning'})">警告消息</button>
<button class="dw-btn btn-success has-hover" onclick="javascript:$('body').dailog({type:'success',maskBg:'rgba(88,11,22,0.5)'})">可改遮罩色</button>
<button class="dw-btn btn-danger has-hover" onclick="javascript:$('body').dailog({type:'danger',title:'震惊!!!',discription:'WE小组赛战胜了SKT,卢兮夜单杀两次瓜皮,心疼一波!'})">自定义标题和描述</button>
<button class="dw-btn btn-danger has-hover" onclick="javascript:$('body').dailog({type:'danger',title:'错误.',discription:'听说昨晚WE战胜了SKT!!!你知道晚WE战胜了SKT!!!你知道吗?',isInput:true},function(ret) {if(ret.index===0){alert('你点击的是第'+ret.index+'个按钮,状态:'+ret.input.status+';输入的值为:'+ret.input.value)};})">点击带回调函数</button>
<button class="dw-btn has-hover disabled input-reverse-tofull" onclick="javascript:$('body').dailog({type:'defalut',showBoxShadow:true})">盒子阴影1</button>
<button class="dw-btn btn-success has-hover" onclick="javascript:$('body').dailog({type:'success',showBoxShadow:true,maskBg:'#fff'})">盒子阴影2</button>
<button class="dw-btn btn-primary has-hover" onclick="javascript:$('body').dailog({type:'primary',showBoxShadow:true,maskBg:'#fff'})">盒子阴影3</button>
<button class="dw-btn btn-primary has-hover" onclick="javascript:$('body').dailog({type:'primary',showBoxShadow:true,animateStyle:'none'})">无进入动画</button>
<button class="dw-btn btn-warning has-hover" onclick="javascript:$('body').dailog({type:'warning',showBoxShadow:true,animateStyle:'none',bottons:['确定'],discription:'也许有点问题!'})">单个按钮</button>
</div>
底部需要引入jquery库和插件:
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791