这是一个简洁，智能，个性化的JAVASCRIPT弹出框

zero dependencies and free dialog library

下载

npm install co-dialog

或者下载 CDN: jsdelivr.com/package/npm/co-dialog

使用

你可以使用src加载文件：

<link rel="stylesheet" href="co-dialog.css">
<script src="co-dialog.js"></script>

或者使用import导入模块：

import Coog from "co-dialog"

or

const Coog = require("co-dialog")

如果使用import引入库需要单独引入style样式：

import Coog from "co-dialog"

import 'co-dialog/dist/co-dialog.min.css'

如果想用CSS3动画, 需要下载 animate.css 库, 在项目中引入库文件：

<link rel="stylesheet" href="animate.min.css">

或者引入一个CDN版本：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

详细动画请参考文档 Animate.css

例子

这是一个显示基本内容的弹出框

const baseBox = Coog.app(".base").use("这是一个基础的弹出框").show()

任何地方都能调用base类弹出框

baseBox.show()

这是一个带标题的success弹出框

Coog.app(".with-title").use(
 "标题",
 "这是一个带标题的弹出框",
 'success'
)
.show()

第三方插件

CSS3动画

如果要使用CSS3动画功能, 暂时只支持animate.css动画库, 实现动画的方式非常简单, 只要导入animate.css动画库, className类名就能被customAnimation识别出来.

Coog
    .app('.the-third-animate')
    .use({
        title: 'use animate.css',
        message: 'Your have seen the animation theme',
        animation: false,
        customAnimation: 'bounceInLeft', // 使用 animate.css 动画
    })
    .show()

点这里看更多例子和文档 🔫

其他版本

• vue-co-dialog - Vue.js Binding

浏览器兼容

Edge	Chrome	Firefox	Safari	Opera	Android Browser
✔️	✔️	✔️	✔️	✔️	✔️

版本改变

查看历史版本

license

MIT