자바스크립트 - alertBox

 

 

function alertBox(msg, delay = 3000){

        var container = document.createElement('div');
        container.setAttribute('class', 'alertBox-container');

        container.style.width = '100%';
        container.style.height = '100px';
        container.style.position = 'fixed';
        container.style.bottom = '0';
        container.style.display = 'flex';
        container.style.justifyContent = 'center';


        var box = document.createElement('div');

        box.style.width = '350px';
        box.style.height = '100px';
        box.style.borderRadius = '15px 15px 0 0';
        box.style.backgroundColor = 'rgb(254, 253, 255)';
        box.style.boxShadow = '1.5px 1px 10px rgba(0, 0, 0, 0.9)'
        box.style.display = 'flex';
        box.style.justifyContent = 'center';
        box.style.alignItems = 'center';
        box.style.marginTop = '200px';

        box.style.transition = '.5s';
        
        var message = document.createElement('p');

        message.innerHTML = msg;
        message.style.fontSize = '23px';
        message.style.userSelect = 'none';


        box.appendChild( message );

        container.appendChild( box );

        document.body.appendChild( container );

        // // 등장
        setTimeout( ()=>{
            box.style.marginTop = '0';
        }, 0 )        
        
        // 사라짐
        setTimeout( ()=>{
            box.style.marginTop = '200px';
            setTimeout( ()=>{ container.remove() }, 1000 )
        }, delay )

    }

    alertBox('만나서 반갑습니다!', 5000);