@buuug7/simplify-alert

simplify alert package

Usage no npm install needed!

<script type="module">
  import buuug7SimplifyAlert from 'https://cdn.skypack.dev/@buuug7/simplify-alert';
</script>

README

simplify alert

npm version npm downloads minified size

Install

install @buuug7/simplify-alert package via npm, and then import from @buuug7/simplify-alert/index.css file.

npm install @buuug7/simplify-alert

Demo examples

Usage

default

<div class="alert">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias
  aspernatur deserunt distinctio dolorem, excepturi fugit harum in inventore
  iure, libero quis quod reprehenderit tempore voluptatibus! Dicta perspiciatis
  qui quia.
</div>

primary

<div class="alert primary">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias
  aspernatur deserunt distinctio dolorem, excepturi fugit harum in inventore
  iure, libero quis quod reprehenderit tempore voluptatibus! Dicta perspiciatis
  qui quia.
</div>

with dismiss

<div class="alert with-dismiss" id="dismissAlert">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias
  aspernatur deserunt distinctio dolorem, excepturi fugit harum in inventore
  iure, libero quis quod reprehenderit tempore voluptatibus! Dicta perspiciatis
  qui quia.
</div>

close dismiss alert use javascript

const alert = document.querySelector('#dismissAlert');
alert.addEventListener('click', function (e) {
  alert.style.display = 'none';
});