简洁的jQuery弹窗插件dialog

一款简洁的jQuery弹窗插件dialog，13种样式可供使用，有的可以自定义标题、描述内容，还可以自定义遮罩的颜色，动画效果都比较简约大气，使用起来也是比较方便的。

分类：悬浮层/弹出层 > 弹窗难易：初级

查看演示下载资源下载积分： 30 积分

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>