9. 项目弹窗总结

在实际的项目中，应用到弹窗的地方很多，最近遇到一个漫画的项目，写了一个小弹窗，总结一下

html部分

<div class="mh-play-tantan">
        <div class="tantan-img-wrap">
            <img src="images/3.png" alt="">
        </div>
        <div class="tantan-desc-wrap">
            <div class="tantan-desc">
                <p>最新话别提前看，追更不用愁！每天免费领4张借阅券，付费漫画免费看(❤ ω ❤)</p>
            </div>
            <a href="#" class="tantan-ok">立即前往</a>
            <a href="#" class="tantan-no">不了，我家有矿不要福利</a>
        </div>
        <p class="tantan-mark"> <span>3</span>s后自动跳转</p>
    </div>
    <div class="fc-share-bg"></div>

css部分

/* 加入书架弹窗开始 */

html {
            font-size: 20px;
        }
        * {
            box-sizing: border-box;
        }
        .mh-play-tantan {
            width: 70vw;
            height: 13.5rem;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -35vw;
            margin-top: -6.75rem;
            -webkit-transform: scale(0);
            transform: scale(0);
            border-radius: 15px;
            z-index: 5;
        }
    
        .tantan-clicked {
            -webkit-animation: tantan .6s ease forwards;
            animation: tantan .6s ease forwards;
        }
    
        @-webkit-keyframes tantan {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
    
            50% {
                -webkit-transform: scale(1.2);
                transform: scale(1.2);
            }
    
            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
    
        @keyframes tantan {
            0% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
    
            50% {
                -webkit-transform: scale(1.2);
                transform: scale(1.2);
            }
    
            100% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
    
        .tantan-img-wrap {
            width: 70vw;
            height: 6rem;
            overflow: hidden;
        }
    
        .tantan-img-wrap img {
            width: 100%;
            display: block;
        }
    
        .tantan-desc-wrap {
            padding: .5rem;
            background-color: #fff;
            height: 7.5rem;
        }
    
        .tantan-desc {
            font-size: .6rem;
            color: #333;
            padding: .5rem 0;
        }
    
        .tantan-ok {
            display: block;
            width: 100%;
            padding: .5rem;
            text-align: center;
            font-size: .7rem;
            color: #fff;
            background-color: #fc7120;
            border-radius: 10px;
        }
    
        .tantan-no {
            display: block;
            font-size: .6rem;
            color: #888;
            text-align: center;
        }
    
        .tantan-mark {
            font-size: .6rem;
            color: #fff;
            position: absolute;
            bottom: -1.5rem;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
    
        .fc-share-body-bg {
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, .3);
            z-index: 4;
            width: 100vw;
            height: 100%;
        }
    
        .show-body2-botm-like {
            width: 100px;
            height: 50px;
            background-color: darkcyan;
            color: #fff;
            border-radius: 10px;
            border: 1px solid #ccc;
            box-shadow: 1px 4px 10px rgba(0, 0, 0, .3);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            outline: none;
        }
/* 加入书架弹窗结束 */

js部分：

// 加入书架弹窗提示
    function tantan(ele, target, style) {
        $(ele).on('click', function(e) {
            e.stopPropagation();
            clearInterval(timer);
            var h = $('body').height();
            timer = setInterval(numIndex, 1000)
            $(target).addClass(style);
            $('.fc-share-bg').addClass('fc-share-body-bg');
            $('.fc-share-bg').css('height', h+'px');
            setTimeout(function() {
                $(target).removeClass(style);
                $('.fc-share-bg').removeClass('fc-share-body-bg');
                $('.fc-share-bg').css('height', 0);
                $('.tantan-mark span').text(3);
                num = 3;
            },4000)
        })
    }
    var num = 3;
    var timer = null;
    function numIndex() {
        num > 0 ? num-- : clearInterval(timer);
        $('.tantan-mark span').text(num);
    }
    tantan('.show-body2-botm-like','.mh-play-tantan', 'tantan-clicked');
    $('.tantan-ok').on('click', function(e) {
        e.stopPropagation();
    })
    $('.tantan-no').on('click', function(e) {
        e.stopPropagation();
    })