简洁的jQuery弹窗插件dialog

简洁的jQuery弹窗插件dialog

添加时间:2021-03-12 12:58:02
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:弹窗
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款简洁的jQuery弹窗插件dialog,13种样式可供使用,有的可以自定义标题、描述内容,还可以自定义遮罩的颜色,动画效果都比较简约大气,使用起来也是比较方便的。
简洁的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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:简洁的jQuery弹窗插件dialog

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.101486s