Browse Source

Added dismissible alert

master
Jose Olarte III 2 years ago
parent
commit
2305440d9d
  1. 24
      project-view.html

24
project-view.html

@ -88,6 +88,30 @@
</ul> </ul>
</div> </div>
</section> </section>
<!-- DISMISSIBLE ALERT -->
<div class="dismissable-alert bg-slate-100 p-5 rounded drop-shadow-lg absolute top-3 inset-x-3 transition-transform ease-in duration-300">
<button class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"><i class="fa-solid fa-xmark"></i></button>
<h4 class="font-bold pr-5">Alert Title Goes Here</h4>
<p>This is an example alert message.</p>
</div>
<script>
var close = document.getElementsByClassName("close-button");
var i;
function dismissElement(targetElement) {
targetElement.style.transform = "translateX(100%)";
setTimeout(function(){ targetElement.style.display = "none"; }, 300);
}
for (i = 0; i < close.length; i++) {
close[i].onclick = function(){
var div = this.parentElement;
dismissElement(div);
}
}
</script>
</body> </body>
</html> </html>
Loading…
Cancel
Save