kindring
/
md


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!--
 * @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>