@eightfeet/lotteryflip

prizes 结构

    [
        {
            "prizeId": 1,
            "prizeType": 0, // 未中奖
            "prizeName": "一等奖",
            "status": 1,
            "awardMsg": "亲！恭喜您获得一等奖！",
            "prizeImg": "./assets/prize1.png",
            "memo": "该奖品由xxx统一提供！"
        }, {
            "prizeId": 1,
            "prizeType": 1, // 实物
            "prizeName": "一等奖",
            "status": 1,
            "awardMsg": "亲！恭喜您获得一等奖！",
            "prizeImg": "./assets/prize1.png",
            "memo": "该奖品由xxx统一提供！"
        }, {
            "prizeId": 1,
            "prizeType": 3, // 虚拟
            "prizeName": "一等奖",
            "status": 1,
            "awardMsg": "亲！恭喜您获得一等奖！",
            "prizeImg": "./assets/prize1.png",
            "memo": "该奖品由xxx统一提供！"
        }
    ]

case

import Modal from '@eightfeet/modal';

var newModal = new Modal({
        id: 'ModalId', // 模板节点id 不传可自动生成id
        zIndex: 100, // modal的层级关系，默认100
        Animation: false, // 启用动画 默认true
        closable: false, // 可关闭 默认true
        shouldCloseOnOverlayClick: true, // 点击背景层关闭弹窗 默认false
        style: { // 定义modal样式 {overlay: 覆盖层, content: 内容区, close: 关闭按钮} 
            overlay: {
                backgroundColor: 'rgba(0,0,0,0.5)'
            },
            content: {
                backgroundColor: 'rgba(100, 100, 100, 0.2)',
                width: '19em',
                // padding: '120px',
                // 设置内容的层级关系
                zIndex: 107
            },
            close: {
                backgroundColor: 'rgba(0, 0, 0, 1)',
                width: '1em',
                height: '1em',
                top: '-3em',
                left: '50%'
            },
            // modify(修饰层)层级按照zIndex（modal的层级）以2为步值递增
            modify: [
                {
                    backgroundColor: 'rgba(0, 0, 255, 0.4)',
                    width: '120%',
                    left: '-10%',
                    height: '200px',
                    border: '1px solid rgba(0, 0, 255, 0.6)',
                    top: '-5em'
                },
                {
                    backgroundColor: 'rgba(0, 0, 255, 0.4)',
                    width: '130%',
                    left: '-15%',
                    height: '200px',
                    border: '1px solid rgba(0, 0, 255, 0.6)',
                    top: '-4em'
                },
                {
                    backgroundColor: 'rgba(0, 0, 255, 0.4)',
                    width: '140%',
                    left: '-20%',
                    height: '200px',
                    border: '1px solid rgba(0, 0, 255, 0.6)',
                    top: '-3em'
                },
                {
                    backgroundColor: 'rgba(0, 0, 255, 0.4)',
                    width: '150%',
                    left: '-25%',
                    height: '200px',
                    border: '1px solid rgba(0, 0, 255, 0.6)',
                    top: '-2em'
                }
            ]
        }
    });
    var btn = document.getElementById('example');
    var btnshow = document.getElementById('exampleshow');
    btn.onclick = function(){ 
        return newModal.create({
            header:'<div style="position:relative; z-index: 90;background-color: yellow;">头部</div>',
            main: `<div style="background-color: #fff;">
                        这是一段内容这是一段内容
                        <input id="inp" type="text" />
                    </div>`,
            footer: `<div style="background-color: white">
                        <button id="close" style="border:1px solid #aaa; padding: 1em">确定</button>
                        <br>
                        脚部
                    </div>`
        }, true).then(function(){
            document.getElementById('close').onclick = function(){
                console.log(document.getElementById('inp').value);
                return newModal.hide(true);
            };
        });
    }
    btnshow.onclick = function(){
        newModal.show();
    };