coco-modal
Version:
454 lines (444 loc) • 13.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coco Modal Examples</title>
<link rel="stylesheet" href="./example.css" />
<link
href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.min.css"
rel="stylesheet"
/>
<script src="./../coco-modal.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.min.js"></script>
</head>
<body>
<div class="root">
<div class="github">
<a
href="http://github.com/TheWindRises-2/coco-modal"
target="_blank"
rel="noopener noreferrer"
>github</a
>
</div>
<div class="content"></div>
</div>
<!-- <script src="https://unpkg.com/coco-modal/coco-modal.min.js"></script> -->
<script src="./example.js"></script>
<!-- 全局配置 -->
<script>
window.CocoConfig = {};
</script>
<!-- 基础 -->
<div class="btn" data-type="base">基础</div>
<script>
example("base", () => {
coco("欢迎使用Coco Modal！");
});
</script>
<!-- alert -->
<div class="btn" data-type="alert">alert</div>
<script>
example("alert", () => {
coco.alert("alert");
});
</script>
<!-- alert -->
<div class="btn" data-type="confirm">confirm</div>
<script>
example("confirm", () => {
coco.confirm("confirm");
});
</script>
<!-- 按钮颜色 -->
<div class="btn" data-type="buttonColor">按钮颜色</div>
<script>
example("buttonColor", () => {
coco({
text: "自定义按钮颜色",
buttonColor: "#e71e63",
});
});
</script>
<!-- 所有参数初始值 -->
<div class="btn" data-type="args">所有参数初始值</div>
<script>
example("args", () => {
coco({
text: `
let initOptions = {
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',
hooks: {
open() {},
opened() {},
close() {},
closed() {},
},
destroy: false,
animation: false
}
`,
top: "center",
cancelButton: false,
okText: "关闭",
title: "所有参数初始值",
maskClose: false,
closeButton: false,
buttonColor: "#ffba00",
});
});
</script>
<!-- 输入框 -->
<div class="btn" data-type="input">输入框</div>
<script>
example("input", () => {
coco({
title: "验证输入",
inputAttrs: {
placeholder: "your name",
},
}).onClose((ok, cc, done) => {
console.log(cc.closeType);
if (ok) {
if (cc.inputValue.trim() === "") {
cc.setErrorText("输入不能为空！");
} else {
cc.setErrorText(cc.inputValue);
cc.inputEl.value = "";
}
} else {
done();
}
});
});
</script>
<!-- onMount (onMount只触发一次 hooks.open 每次打开都会触发) -->
<div class="btn" data-type="onMount">onMount</div>
<script>
example("onMount", () => {
coco({
cancelButton: false,
okText: "关闭",
top: "center",
title: "图片预览",
buttonColor: "#e71e63",
html: `
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607808016723&di=77c99b58378c7151e0d2cf734117ed4f&imgtype=0&src=http%3A%2F%2Fwww.2qqtouxiang.com%2Fpic%2FBZ7279_03.jpg">
</div>
<div class="swiper-slide">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607810326769&di=9ea9a60f71d075a18a3de8ef613ef27d&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F31%2F20150531223217_TxAeB.jpeg">
</div>
<div class="swiper-slide">
<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1345920986,2817828199&fm=26&gp=0.jpg">
</div>
<div class="swiper-slide">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607809687101&di=702e1bde8d40194c465903dfa5a3228d&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fa18c402f6de47835b871d4dbd845e235c0be6954.jpg">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
`,
onMount(cc) {
let { wrapper } = cc;
let swiper = wrapper.querySelector(".swiper-container");
new Swiper(swiper, {
speed: 300,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
loop: true,
});
},
top: "center",
});
});
</script>
<!-- 长内容 -->
<div class="btn" data-type="long">长内容</div>
<script>
example("long", () => {
coco({
title: "长内容",
top: "30px",
html: `
<div class="long" style="background-color: #fff;height:4000px;"></div>
`,
}).onClose((ok, cc, done) => {
if (ok) {
coco("点击了Ok！");
} else {
cc.hideLoading();
done();
}
});
});
</script>
<!-- 全屏 -->
<div class="btn" data-type="fullScreen">全屏</div>
<script>
example("fullScreen", () => {
coco({
title: "全屏",
fullScreen: true,
html: `
<div class="full" style="background-color: #fff;height:4000px;"></div>
`,
}).onClose((ok, cc, done) => {
if (ok) {
coco("点击了Ok！");
} else {
done();
}
});
});
</script>
<!-- DOM -->
<div id="login" style="display: none">
<div>
<input
id="username"
type="text"
class="coco-input"
placeholder="账号"
/>
</div>
<div>
<input
id="password"
type="password"
class="coco-input"
placeholder="密码"
/>
</div>
</div>
<div class="btn" data-type="dom">使用DOM做内容</div>
<script>
let username = document.body.querySelector("#username");
let password = document.body.querySelector("#password");
example("dom", () => {
coco({
title: "登录",
el: "#login",
okText: "提交",
maskClose: false,
escClose: false,
}).onClose((ok, cc, done) => {
if (ok) {
if (username.value.trim() !== "" && username.value.trim() !== "") {
done();
} else {
cc.setErrorText("输入不能为空！");
}
} else {
done();
}
});
});
</script>
<!-- DOM -->
<div class="btn" data-type="Multiple">多个modal</div>
<script>
example("Multiple", () => {
coco({
top: "300px",
text: "再打开一个",
okText: "再打开一个",
}).onClose((ok, cc, done) => {
if (ok) {
coco({
top: "100px",
text: "再打开一个",
okText: "再打开一个",
}).onClose((ok, cc, done) => {
if (ok) {
coco({
top: "500px",
text: "再打开一个",
okText: "再打开一个",
}).onClose((ok, cc, done) => {
if (ok) {
coco("没有了！");
} else {
done();
}
});
} else {
done();
}
});
} else {
done();
}
});
});
</script>
<!-- 不显示头部和脚部 -->
<div class="btn" data-type="hide">不显示头部和脚部</div>
<script>
example("hide", () => {
coco({
header: false,
footer: false,
text: "不显示头部和脚部",
});
});
</script>
<!-- 居中 -->
<div class="btn" data-type="center">居中</div>
<script>
example("center", () => {
coco({
top: "center",
text: "top:'center' 居中显示",
});
});
</script>
<!-- loading按钮 -->
<div class="btn" data-type="loading">loading按钮</div>
<script>
example("loading", () => {
coco({
top: "220px",
text: "点击确定会显示loading动画",
}).onClose((ok, cc, done) => {
let tmr = null;
if (ok) {
cc.showLoading();
tmr = setTimeout(() => {
cc.hideLoading();
}, 3000);
} else {
clearTimeout(tmr);
cc.hideLoading();
done();
}
});
});
</script>
<!-- hooks -->
<div class="btn" data-type="hooks" id="hooks">hooks</div>
<script>
let hooks = document.body.querySelector("#hooks");
example("hooks", () => {
coco({
top: "20px",
text: "一共有 open opened close closed 四个hook",
hooks: {
open(cc) {
hooks.innerText = "open";
},
opened(cc) {
hooks.innerText = "opened";
},
close(cc) {
hooks.innerText = "close";
},
closed(cc) {
hooks.innerText = "closed";
},
},
});
});
</script>
<!-- 毛玻璃效果 -->
<div class="btn" data-type="blur">毛玻璃背景</div>
<script>
example("blur", () => {
coco({
text: "毛玻璃背景效果",
blur: true,
});
});
</script>
<!-- 没有动画 -->
<div class="btn" data-type="noAnimation">没有动画</div>
<script>
example("noAnimation", () => {
coco({
text:
"没有动画时间。 ( 开启动画时,打开动画时长为380ms，关闭动画为280ms )",
animation: false,
buttonColor: "#ffba00",
});
});
</script>
<!-- 关闭时销毁 -->
<div class="btn" data-type="destroy">关闭时销毁</div>
<script>
example("destroy", () => {
let count = 0;
let intv = null;
coco({
text: "0",
title: "关闭时销毁modal",
buttonColor: "#ffba00",
destroy: true,
onMount(cc) {
intv = setInterval(() => {
cc.textEl.innerText = ++count;
}, 500);
},
hooks: {
closed() {
clearInterval(intv);
},
},
});
});
</script>
<!-- 关闭时不销毁 -->
<div class="btn" data-type="notDestroy">关闭时不销毁</div>
<script>
example("notDestroy", () => {
let count1 = 0;
let intv1 = null;
coco({
text: "0",
title: "关闭时不销毁",
buttonColor: "#ffba00",
onMount(cc) {
intv1 = setInterval(() => {
cc.textEl.innerText = ++count1;
}, 500);
},
hooks: {
open(cc) {},
},
});
});
</script>
</body>
</html>