[javascript] 플러그인 없이 blick 팝업 만들기

플러그인 없이 순수 script로 시간 차 팝업 띄우기

 

html

<div class="blinkPopup">
    <a href="javascript:go_link()">
	<div class="blinkInner">
		<div class="text">
			지금 <b><span class="ageListPop">61</span>세 <span class="nameListPop">양</span>**님이 신청</b>했습니다.
		</div>
	</div>
	</a>
</div>

css

.blinkPopup {position:fixed; left:10%; bottom:10px; width:80%; transform:scale(0); opacity:0; transition:all 0s; z-index:1}
.blinkPopup.on { transform:scale(1); opacity:1; transition:all 0.3s;}
.blinkPopup .blinkInner {width:100%; max-width:640px; margin:0 auto; position:relative; background: #ff0059; border-radius:10px; padding:10px 0; color:#fff; text-align:center; box-sizing: border-box; font-weight:bold; font-size:17px}  
.blinkPopup .blinkInner b {color:#fff29d;}

script

var nameList = "김,이,박,최,양,권,임,강,이,정".split(",");
var ageList = "65,58,61,55,61,65,55,57,63,58".split(",");
function offBlink(){
    setTimeout(function(){
        $(".blinkPopup").removeClass("on");
    }, 3500)
}
function showBlink(){
    var iCycle = 0;
    setTimeout(function(){
        var tid = setInterval(function(){
            if(iCycle == 30){
                clearInterval(tid);
            }else{
                var listIndex = Math.floor(Math.random() * 10);
                $(".blinkPopup").addClass("on");
                $(".blinkPopup .nameListPop").html( nameList[listIndex] );
                $(".blinkPopup .ageListPop").html( ageList[listIndex] );
                offBlink();
                iCycle++;
            }
        }, 8000);
    },12000);
}
showBlink();