CodePen Embed - Js toast alert and notification

<!-- 
 how does it work ?
     Add the CSS and JavaScript codes
      to your document then 
      call ava function like this =>
      ava({
        icon: string 'success' | 'danger' | 'info' | 'none' (defult is success),
        text: string (alert text),
        toast: bol true | false (defult is false) ,
        progressBar: bol true | false (defult is true),
        timer: int (defult is 4000),
        btnText: string (Alert btn text Not Work For toast alerts),
        direction: string 'rtl' | 'ltr' (defult is rtl only for toast),
        position: string 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right' (defult is top-right Only work for Toast alerts),
      })

      good luck =)
 -->
<h2>
        Ava Alert
    </h2>
    <button style="padding: 10px 20px; margin: 5px; display: block;" onclick="info()">info alert</button>
    <button style="padding: 10px 20px; margin: 5px; display: block;" onclick="success()">success alert</button>
    <button style="padding: 10px 20px; margin: 5px; display: block;" onclick="danger()">danger alert</button>
    <button style="padding: 10px 20px; margin: 5px; display: block;" onclick="white()">alert</button>
    <hr>
    <h2>
        Ava Toast Alert
    </h2>
    <button style="padding: 10px 20px; margin: 5px; display: block;" onclick="Toast_info()">Toast info</button>
    <button style="padding: 10px 20px; margin: 5px; display: block;" onclick="Toast_success()"> Toast success </button>
    <button style="padding: 10px 20px; margin: 5px; display: block;" onclick="Toast_danger()"> Toast danger </button>
    <button style="padding: 10px 20px; margin: 5px; display: block;" onclick="Toast_white()">Toast alert</button>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
  direction: ltr;
}

body {
  background-color: #ffffff;
  color: black;
}

.ava-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ava-modal > * {
  box-sizing: border-box;
}

.ava-alert {
  background-color: white;
  width: 80%;
  text-align: right;
  font-family: "Gill Sans", "Gill Sans MT", Calibri;
  font-weight: 900;
  animation: 25s 1 ava_alert_animation;
  -webkit-animation: 0.5s 1 ava_alert_animation;
}

@media (min-width: 650px) {
  .ava-alert {
    width: 300px;
  }
}

@keyframes ava_alert_animation {
  from {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

.ava-alert .ava-progress-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.04);
  animation-name: progressBarAnimation;
  -webkit-animation-name: progressBarAnimation;
}

.ava-alert .ava-text-con {
  position: relative;
}

@keyframes progressBarAnimation {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.ava-alert__icon {
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: inset 0px -5px 7px rgba(0, 0, 0, 0.3);
}

.ava-alert__text {
  padding: 15px;
  line-height: 1.5em;
  color: #8a8a8a;
  font-size: 13px;
}

.ava-alert__btn {
  width: 70px;
  padding: 7px 0px;
  display: block;
  margin: auto;
  margin-bottom: 13px;
  border-radius: 0;
  border: 0;
  background-color: #dfdfdf;
  color: #b1b1b1;
  cursor: pointer;
  position: relative;
}

.ava-toast {
  position: fixed;
  box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.1);
  width: 250px;
  display: flex;
  flex-direction: row;
  background-color: white;
}

.ava-toast svg {
  width: 30px;
  height: 30px;
}

.ava-toast .ava-alert__icon {
  padding: 0 10px;
  box-shadow: none;
}

.ava-toast .ava-text-con {
  width: 100%;
}

.ava-toast .ava-alert__btn {
  margin: 0;
}

.ava-toast .ava-alert__text {
  padding: 5px;
  width: 100%;
}

.svg-box {
  display: inline-block;
  position: relative;
  width: 150px;
}

.ava-text-con {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.green-stroke {
  stroke: #ffffff;
}

.red-stroke {
  stroke: #ffffff;
}

.yellow-stroke {
  stroke: #ffffff;
}

.circular circle.path {
  stroke-dasharray: 330;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  opacity: 0.4;
  animation: 0.7s draw-circle ease-out;
}

/*------- Checkmark ---------*/
.checkmark {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 56px;
  left: 49px;
  width: 52px;
  height: 40px;
}

.checkmark path {
  animation: 1s draw-check ease-out;
}

@keyframes draw-circle {
  0% {
    stroke-dasharray: 0, 330;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  80% {
    stroke-dasharray: 330, 330;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

@keyframes draw-check {
  0% {
    stroke-dasharray: 49, 80;
    stroke-dashoffset: 48;
    opacity: 0;
  }
  50% {
    stroke-dasharray: 49, 80;
    stroke-dashoffset: 48;
    opacity: 1;
  }
  100% {
    stroke-dasharray: 130, 80;
    stroke-dashoffset: 48;
  }
}

/*---------- Cross ----------*/
.cross {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 54px;
  left: 54px;
  width: 40px;
  height: 40px;
}

.cross .first-line {
  animation: 0.7s draw-first-line ease-out;
}

.cross .second-line {
  animation: 0.7s draw-second-line ease-out;
}

@keyframes draw-first-line {
  0% {
    stroke-dasharray: 0, 56;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 0, 56;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 56, 330;
    stroke-dashoffset: 0;
  }
}

@keyframes draw-second-line {
  0% {
    stroke-dasharray: 0, 55;
    stroke-dashoffset: 1;
  }
  50% {
    stroke-dasharray: 0, 55;
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dasharray: 55, 0;
    stroke-dashoffset: 70;
  }
}

.alert-sign {
  stroke-width: 6.25;
  stroke-linecap: round;
  position: absolute;
  top: 40px;
  left: 68px;
  width: 15px;
  height: 70px;
  animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-sign .dot {
  stroke: none;
  fill: #ffffff;
}

@keyframes alert-sign-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}


        const ava = ({ icon = 'success', toast = false, progressBar = true, text = null, timer = 4000, btnText = 'Okay', direction = 'rtl', position = 'top-right' }) => {
            const modal = document.createElement('section');
            modal.setAttribute('class', 'ava-modal');
            document.body.appendChild(modal);
            const alert = document.createElement('div');
            alert.setAttribute('class', 'ava-alert');
            modal.appendChild(alert);
            var avaIcon;
            if (icon == 'success' && toast == false) {
                avaIcon = `
                <div class="ava-alert__icon" style="background: #438C5E;">
                <div class="svg-box">
                    <svg class="circular green-stroke">
                    <circle class="path" cx="75" cy="75" r="50" fill="none" stroke-width="5" stroke-miterlimit="10"/>
                </svg>
                <svg class="checkmark green-stroke">
                    <g transform="matrix(0.79961,8.65821e-32,8.39584e-32,0.79961,-489.57,-205.679)">
                        <path class="checkmark__check" fill="none" d="M616.306,283.025L634.087,300.805L673.361,261.53"/>
                    </g>
                </svg>
                </div>
            </div>
              `;

            } else if (icon == 'info' && toast == false) {
                avaIcon = `
                <div class="ava-alert__icon" style="background: #434D8C;">
                <div class="svg-box">
                    <svg class="circular yellow-stroke">
                        <circle class="path" cx="75" cy="75" r="50" fill="none" stroke-width="5"
                            stroke-miterlimit="10" />
                    </svg>
                    <svg class="alert-sign yellow-stroke">
                        <g transform="matrix(1,0,0,1,-615.516,-257.346)">
                            <g transform="matrix(0.56541,-0.56541,0.56541,0.56541,93.7153,495.69)">
                                <path class="line" d="M634.087,300.805L673.361,261.53" fill="none" />
                            </g>
                            <g transform="matrix(2.27612,-2.46519e-32,0,2.27612,-792.339,-404.147)">
                                <circle class="dot" cx="621.52" cy="316.126" r="1.318" />
                            </g>
                        </g>
                    </svg>
                </div>
            </div>

              `;

            } else if (icon == 'danger' && toast == false) {
                avaIcon = `
                <div class="ava-alert__icon" style="background: #8C4343;">
                <div class="svg-box">
                    <svg class="circular red-stroke">
                    <circle class="path" cx="75" cy="75" r="50" fill="none" stroke-width="5" stroke-miterlimit="10"/>
                </svg>
                <svg class="cross red-stroke">
                    <g transform="matrix(0.79961,8.65821e-32,8.39584e-32,0.79961,-502.652,-204.518)">
                        <path class="first-line" d="M634.087,300.805L673.361,261.53" fill="none"/>
                    </g>
                    <g transform="matrix(-1.28587e-16,-0.79961,0.79961,-1.28587e-16,-204.752,543.031)">
                        <path class="second-line" d="M634.087,300.805L673.361,261.53"/>
                    </g>
                </svg>
                </div>
            </div>
              `;

            } else if (icon == 'info' && toast == true) {
                avaIcon = `
                    <div class="ava-alert__icon" style="background: #434D8C;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="8" stroke-dashoffset="8" d="M12 7V13"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="8;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>
            </div>
                    `;
                btnText = '';
            } else if (icon == 'success' && toast == true) {
                avaIcon = `
                    <div class="ava-alert__icon" style="background: #438C5E;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="14;0"/></path></g></svg>
            </div>
                    `;
                btnText = '';
            } else if (icon == 'danger' && toast == true) {
                avaIcon = `
                    <div class="ava-alert__icon" style="background: #8C4343;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="8" stroke-dashoffset="8" d="M12 12L16 16M12 12L8 8M12 12L8 16M12 12L16 8"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="8;0"/></path></g></svg>
            </div>
                    `;
                btnText = '';
            } else if (toast == true && icon == 'none') {
                avaIcon = '';
                btnText = '';
            } else if (toast == false && icon == 'none') {
                avaIcon = '';
            }
            document.querySelector('.ava-alert').innerHTML = `
          ${avaIcon}
<div class='ava-text-con'>
            <p class="ava-alert__text">
            ${text}
            </p>
            <button class="ava-alert__btn">${btnText}</button>
        </div>
            `;
            var new_timer_format = '';
            switch (timer) {
                case 1000:
                    new_timer_format = '1s';
                    break;
                case 2000:
                    new_timer_format = '2s';
                    break;
                case 3000:
                    new_timer_format = '3s';
                    break;
                case 4000:
                    new_timer_format = '4s';
                    break;
                case 5000:
                    new_timer_format = '5s';
                    break;
                case 6000:
                    new_timer_format = '6s';
                    break;
                case 7000:
                    new_timer_format = '7s';
                    break;
                case 8000:
                    new_timer_format = '8s';
                    break;
                case 9000:
                    new_timer_format = '9s';
                    break;
                case 10000:
                    new_timer_format = '10s';
                    break;
                default:
                    new_timer_format = '4s';
            }
            if (timer > 10000) {
                timer = 4000;
            }
            if (toast == true) {
                modal.style = 'background-color: rgba(0, 0, 0, 0);';
                alert.classList.add('ava-toast');
                if (progressBar == false) {
                    document.querySelector('.ava-alert__btn').remove();
                } else {
                    document.querySelector('.ava-alert__btn').style = 'width: 100%; padding: 2px;'
                }
                switch (position) {
                    case 'top-right':
                        alert.style = `
                    top: 10px;
                    right: 10px;
                    `;
                        break;
                    case 'top-left':
                        alert.style = `
                    top: 10px;
                    left: 10px;
                    `;
                        break;
                    case 'bottom-left':
                        alert.style = `
                        bottom: 10px;
                        left: 10px;
                    `;
                        break;
                    case 'bottom-right':
                        alert.style = `
                        bottom: 10px;
                    right: 10px;
                    `;
                        break;
                }
            }
            if (progressBar == true) {
                const progressBar_el = document.createElement('div');
                progressBar_el.setAttribute('class', 'ava-progress-bar');
                document.querySelector('.ava-alert__btn').appendChild(progressBar_el);
                document.querySelector('.ava-progress-bar').style = `
                animation-duration: ${new_timer_format};
        -webkit-animation-duration: ${new_timer_format};
                `;
            }

            if (progressBar == true) {
                setTimeout(() => {
                    modal.remove();
                    alert.remove();
                }, timer);
            } else if (progressBar == false && toast == true) {
                setTimeout(() => {
                    modal.remove();
                    alert.remove();
                }, timer);
            }
            if (direction == 'rtl' && toast == true) {
                document.querySelector('.ava-modal > *').style.direction = 'rtl';
                document.querySelector('.ava-modal > *').style.textAlign = 'right';
                document.querySelector('.ava-alert__btn').style.direction = 'rtl';
            } else if (direction == 'ltr' && toast == true) {
                document.querySelector('.ava-modal > *').style.direction = 'ltr';
                document.querySelector('.ava-modal > *').style.textAlign = 'left';
                document.querySelector('.ava-alert__btn').style.direction = 'ltr';
            } else {
                document.querySelector('.ava-modal > *').style.textAlign = 'center';
            }
            document.querySelector('.ava-alert__btn').addEventListener('click', function () {
                alert.remove();
                modal.remove();
            })
            window.addEventListener('click', function (e) {
                if (e.target == document.querySelector('.ava-modal')) {
                    modal.remove();
                    alert.remove();
                }

            })
        }









        function info() {
            ava({
                icon: 'info',
                text: 'This is a Info Alert',
                btnText: 'Okay',
                progressBar: true,
                toast: false,
            });
        }
        function success() {
            ava({
                icon: 'success',
                text: 'This is a Success Alert',
                btnText: 'Okay',
                progressBar: true,
                toast: false,
            });
        }
        function danger() {
            ava({
                icon: 'danger',
                text: 'This is a Danger Alert',
                btnText: 'Okay',
                progressBar: true,
                toast: false,
            });
        }

        function white() {
            ava({
                icon: 'none',
                text: 'This is a Simple Alert',
                btnText: 'Okay',
                progressBar: true,
                toast: false,
                timer: 8000
            });
        }


        function Toast_info() {
            ava({
                icon: 'info',
                text: 'This is a Toast info Alert',
                btnText: '',
                progressBar: true,
                toast: true,
                position: 'top-right',
                direction: 'ltr',
                timer: 4000
            });
        }


        function Toast_success() {
            ava({
                icon: 'success',
                text: 'This is a Toast success Alert',
                btnText: '',
                progressBar: true,
                toast: true,
                position: 'top-right',
                direction: 'ltr',
                timer: 4000
            });
        }


        function Toast_danger() {
            ava({
                icon: 'danger',
                text: 'This is a Toast danger Alert',
                btnText: '',
                progressBar: true,
                toast: true,
                position: 'top-right',
                direction: 'ltr',
                timer: 4000
            });
        }

        function Toast_white() {
            ava({
                icon: 'none',
                text: 'This is a Toast simple Alert',
                btnText: '',
                progressBar: true,
                toast: true,
                position: 'top-right',
                direction: 'ltr',
                timer: 4000
            });
        }


        ava({
            icon: 'info',
            text: 'Welcome <br> ava is a custom javascript alert <br> if You enjoy please like this pen',
            btnText: 'Lets Go',
            progressBar: false,
            

        });

This Pen is owned by vahid on CodePen.

See more by @ossvahid on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.