co-dialog 版本v2.0.0
浏览器默认的alert弹出框
alert("默认alert功能")
这是一个基础的弹出框
coog.app(".base").use("这是一个基础的弹出框").show()
co-dialog弹出框
coog.app(".alert").use( "标题", "这是一个CoDialog组件", "OK" ).show()
你可以拖动我一下
coog.app(".try-drag").use({ title: "拖动-isDrag", message: "请尝试拖动窗口", isDrag: true, }).show()
这是一个layout布局,靠右下角显示的弹出框
coog.app(".layout-right-bottom").use({ title: "布局-layout", message: "这是一个layout布局,靠右下角显示的弹出框", layout: "right bottom", }).show()
超时自动关闭
coog.app(".timeout").use({ title: "超时-timeout", message: "超时自动关闭", timeout: 2000, }).show()
显示取消按钮和功能
coog.app(".show-cancle").use({ title: "取消-show-cancle", message: "显示取消按钮和功能", showCancleButton: true, isGesture: true, isDrag: true, }).show()
弹出框内容自定义
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()
自定义动画
coog.app(".customAnimation").use({ title: "自定义动画-customAnimation", message: "基于animated.css类实现自定义动画", isClose: true, layout: "center", isDrag: true, animation: false, customAnimation: "slideInDown", }).show()
确认回调函数
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()