<!--
* @Description: 测试弹窗功能
* @Autor: kindring
* @Date: 2021-10-26 11:27:22
* @LastEditors: kindring
* @LastEditTime: 2021-10-26 15:17:33
* @LastDescript:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<script src="./quickDom.js"></script>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<button onclick="show()">弹窗tip</button>
<button onclick="show()">弹窗tip</button>
<button onclick="show()">弹窗tip</button>
<div id="parent" class="div1">
</div>
<div id="pop1">
这是弹窗1
</div>
<div id="pop2">
这是弹窗2
</div>
<script>
let tip = new CustomPop({
type: 'tip'
})
let n = 0;
function show() {
tip.show('show:' + n);
n++
}
console.log(tip);
tip.show('测试error', 'error')
tip.show('测试ok', 'ok')
tip.show('测试waring', 'warn')
tip.show('测试info')
let c = new CustomPop({
type: 'custom',
// mask: true,
autoClose: true,
el: document.getElementById('parent'),
centerDoms: [{
key: 'pop1',
el: document.getElementById('pop1')
}, {
key: 'pop2',
el: document.getElementById('pop2')
}]
})
console.log(c);
c.show('pop1')
setTimeout(() => {
c.hide('pop1')
}, 2000);
setTimeout(() => {
c.show('pop2')
}, 4000);
setTimeout(() => {
c.show('pop1')
}, 6000);
setTimeout(() => {
c.show('测试功能呢')
}, 6000);
setTimeout(() => {
c.show('pop1')
}, 7000);
setTimeout(() => {
c.show('pop1')
}, 7500);
</script>
</body>
</html>