coco-modal是一个简单实用的javascript弹框插件， 兼容主流浏览器，兼容至ie9 (ie9没有动画效果)
install via cnpm:
cnpm install coco-modal -S
import coco from 'coco-modal'
coco('hello world')
<script src="https://unpkg.com/coco-modal/coco-modal.min.js"></script>
<style>
body{
margin:0
}
.root {
width: 1000px;
height: 2000px;
background-color: #f1f1f2;
margin: 0 auto;
}
</style>
<div class="root"></div>
<script src="https://unpkg.com/coco-modal/coco-modal.min.js"></script>
<script>
window.CocoConfig = {
buttonColor:'#e71e63'
}
let root = document.body.querySelector(".root");
let count = 0;
root.addEventListener("click", () => {
let n = count++ % 3;
n === 0 && coco("hello world");
n === 1 && coco.alert("alert");
n === 2 && coco.confirm("confirm");
});
</script>显示一个输入框
<style>
body{
margin:0
}
.root {
width: 1000px;
height: 2000px;
background-color: #f1f1f2;
margin: 0 auto;
}
</style>
<div class="root"></div>
<script src="https://unpkg.com/coco-modal/coco-modal.min.js"></script>
<script>
window.CocoConfig = {
buttonColor:'#e71e63'
}
let root = document.body.querySelector(".root");
root.addEventListener("click", () => {
coco({
title: "验证输入",
inputAttrs: {
placeholder: "your name",
},
}).onClose(( isOk,cc, done) => {
console.log(cc.closeType);
if (isOk) {
if (cc.inputValue.trim() === "") {
cc.setErrorText("输入不能为空！");
} else {
cc.setErrorText("");
cc.inputEl.value = "";
done();
}
} else {
done();
}
});
});
</script>window.CocoConfig 接收的参数作用所有的modal，单个modal的参数会覆盖全局参数
{
el: null, // 一个dom节点或者选择器 el: '#login'
maskClose: true,
header: true,
footer: true,
title: '提示',
text: '',
width: '500px',
top: '15vh',
inputAttrs: false,
escClose: true,
okButton: true,
cancelButton: true,
okText: '确定',
cancelText: '取消',
closeButton: true,
html: '',
zIndexOfModal: 1995,
zIndexOfMask: 2008,
zIndexOfActiveModal: 2020,
autoFocusOkButton: true,
autoFocusInput: true,
fullScreen: false,
borderRadius: '6px',
blur: false,
buttonColor: '#4285ff',
onMount(){},
hooks: {
open(){},
opened(){},
close(){},
closed(){}
},
destroy: false,
animation: true
}