简洁的jQuery弹窗插件dialog

简洁的jQuery弹窗插件dialog

简洁的jQuery弹窗插件dialog

简洁的jQuery弹窗插件dialog

源码介绍

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>


分享到 :
CSS模糊背景毛玻璃效果
上一篇 2018-05-03 12:51:58
html5 svg不规则棱形背景动画特效
2018-05-22 08:58:53 下一篇

发表评论

登录... 后才能评论