co-dialog弹出框组件-版本v2.0.0

co-dialog theme 访问git:co-dialog 版本v2.0.0

主题2

coog.app('.theme2').use({
title: 'JUST CHECKING.',
message: 'Delete your account?' + "<p style='font-size:12px;'>This action is final and you will be unable to recover any data</p>",
isDrag: true,
layout: 'center',
titleColor: '#865FDF',
closeColor: '#865FDF',
showCancleButton: true,
confirmButtonText: 'YES',
cancleButtonText: 'NO',
footerText: "",
confirmButtonBackground: '#865FDF',
cancleButtonBackground: '#865FDF',
confirmButtonColor: '#fff',
onHeaderBefore: function (node) {
this.style.backgroundColor = "#fff"
this.style.borderBottom = "1px solid #ddd"
},
onFooterBefore: function (node) {
this.style.backgroundColor = "#865FDF"
this.style.marginBottom = '0'
this.style.padding = '10px 0'
},
confirmCallback: function () {
coog.app(".test3").use({
titleColor: '#45B680',
title: 'Return Results',
message: 'Success Delete',
confirmButtonText: 'YES',
confirmCallback: function () {
coog.app('.test').show()
}
})
.show()
}
})
.show()

co-dialog弹出框组件-版本v2.0.0

主题3

coog
.app('.theme3')
.use({
title: 'This is a title',
message: 'We’re also releasing our first step towards showcasing what’s possible when using GitHub Desktop. In 1.4, we’ve added our release notes to the app to highlight what’s changed since the last release, and to recognize—and thank—our amazing contributors',
isClose: true,
isDrag: true,
layout: 'center',
animation: false,
customAnimation: 'slideInDown',
titleColor: '#333',
closeColor: '#333',
confirmButtonText: "Read More",
confirmButtonColor: '#333',
animation: false,
customAnimation: 'swing',
onDialogBefore: function () {
this.style.background = "#F1F1F1";
this.style.border = "3px solid #333";
},
onHeaderBefore: function () {
this.style.background = "#F1F1F1";
this.style.borderBottom = "2px solid #333";
this.style.margin = "0 30px";
this.style.paddingLeft = "0";
this.style.paddingRight = "0";
},
onBodyBefore: function () {
this.style.fontSize = "14px";
this.style.textAlign = "left";
},
onFooterBefore: function () {
this.style.float = 'left'
this.style.marginLeft = '30px'
},
methods: function () {
this.footer.$refs.button.children[0].style.background = "transparent";
this.footer.$refs.button.children[0].style.border = "2px solid #333"
}
})
.show();

co-dialog弹出框组件-版本v2.0.0

主题4

coog
.app('.theme4')
.use({
title: 'Dialog Only Page',
message: "I can only be served as a dialog, and I don't need a data-rel='dialog' attribute on a link",
isClose: true,
isDrag: true,
layout: 'center',
animation: false,
customAnimation: 'bounceInLeft',
showConfirmButton: false,
onHeaderBefore: function (){
this.style.background = "#2A2A2A"
},
onBodyBefore: function (){
this.style.fontSize = "14px"
},
})
.show();

co-dialog弹出框组件-版本v2.0.0

以下访问官网:https://koringz.github.io/co-dialog/index网址:yii666.com<

浏览器默认的alert弹出框文章来源地址https://www.yii666.com/article/758316.html

alert("默认alert功能")

co-dialog弹出框组件-版本v2.0.0

这是一个基础的弹出框

coog.app(".base").use("这是一个基础的弹出框").show()

co-dialog弹出框组件-版本v2.0.0

co-dialog弹出框

coog.app(".alert").use(
"标题",
"这是一个CoDialog组件",
"OK"
).show()

co-dialog弹出框组件-版本v2.0.0

你可以拖动我一下

coog.app(".try-drag").use({
title: "拖动-isDrag",
message: "请尝试拖动窗口",
isDrag: true,
}).show()

co-dialog弹出框组件-版本v2.0.0

这是一个layout布局,靠右下角显示的弹出框网址:yii666.com

coog.app(".layout-right-bottom").use({
title: "布局-layout",
message: "这是一个layout布局,靠右下角显示的弹出框",
layout: "right bottom",
}).show()

co-dialog弹出框组件-版本v2.0.0

超时自动关闭

coog.app(".timeout").use({
title: "超时-timeout",
message: "超时自动关闭",
timeout: 2000,
}).show()

co-dialog弹出框组件-版本v2.0.0

显示取消按钮和功能

coog.app(".show-cancle").use({
title: "取消-show-cancle",
message: "显示取消按钮和功能",
showCancleButton: true,
isGesture: true,
isDrag: true,
}).show()

co-dialog弹出框组件-版本v2.0.0

弹出框内容自定义文章来源地址:https://www.yii666.com/article/758316.html

coog.app(".custom").use({
isGesture: true,
isDrag: true,
onHeaderBefore: function () {
this.innerHTML = "<span ref='top'>顶部</span>"
},
onBodyBefore: function () {
this.innerHTML = "<span ref='middle'>中间</span>"
},
onFooterBefore: function () {
this.innerHTML = "<span ref='bottom'>底部</span>"
},
methods: function () {
this.header.$refs.top.style.color = "#4E5198"
this.body.$refs.middle.style.color = "#4E5198"
this.footer.$refs.bottom.style.color = "#4E5198"
}
}).show()

co-dialog弹出框组件-版本v2.0.0

自定义动画


coog.app(".customAnimation").use({
title: "自定义动画-customAnimation",
message: "基于animated.css类实现自定义动画",
isClose: true,
layout: "center",
isDrag: true,
animation: false,
customAnimation: "slideInDown",
}).show()

co-dialog弹出框组件-版本v2.0.0

确认回调函数


coog.app(".confirmCallback").use({
title: "确认回调-confirmCallback",
message: "你想清除确认回调函数吗?",
showCancleButton: true,
confirmCallback: function () {
coog.app(".confirm-clear-callback").use("你已确定清除").show()
},
}).show()

没有图片 线上地址 https://koringz.github.io/co-dialog/index

紫色主题


coog.app(".theme-purple").use({
title: "紫色主题-purple-theme",
message: "Your have seen the purple theme",
layout: "right top",
isGesture: true,
isDrag: true,
titleColor: "#4E5198",
closeColor: "#4E5198",
showCancleButton: true,
confirmButtonBackground: "#4E5198",
cancleButtonText: "Confirm",
confirmButtonText: "Cancle",
}).show()

co-dialog弹出框组件-版本v2.0.0文章地址https://www.yii666.com/article/758316.html

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

co-dialog弹出框组件-版本v2.0.0-相关文章

  1. struts2必备jar包(2.1.6版本)

  2. MIUI7,Android版本5.0.2,一个程序发送自定义广播,另一个程序没有接收到

  3. ASP。netcore,Angular2 CRUD动画使用模板包,WEB API和EF 1.0.1

  4. C# 语言规范_版本5.0 (第0章 目录)

  5. Dream------Hbase--0.94版本和0.98/1.X版本api变动

  6. 使用版本 1.0.0 的 Azure ARM SDK for Java 创建虚拟机时报错

  7. co-dialog弹出框组件-版本v2.0.0

  8. S​Q​L​_​S​e​r​v​e​r​_​2​0​0​8​定​期​自​动​备​份​详​细​图​解

    S​Q​L​_​S​e​r​v​e​r​_​2​0​0​8​定​期​自​动​备​份​详​细​图​解设置自动数据库的定期备份计划。http://wenku.baidu.com/link?url=TuIlrcjwKmDeNnfvqRG2cGUcBVYVqI0U6CXtDcmW7u1IjOxdP0WFyJ3y3ldAmVV0lRbKGXu2mX-LPphHzba5J61BsGWjluJ4t0rSVOcxOhS

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png