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

 

 

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

 

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

 

 

如下訪問官網：https://koringz.github.io/co-dialog/index

 

瀏覽器默認的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()