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

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()

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();

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();

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

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

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

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()

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()