How to create a sticky notification in plain HTML CSS and JS-CodePudding

Hello everyone I need to create 3 different types of dialog boxes for school but the way it's worded I cannot find information online of how to do it. I need to create a sticky popup that is unintrusive! to the screen and untimed. Closed by clicking the x in the popup. I have a growl notification already that is timed. Now I don't even know what to look for as the internet has me going in circles the image I attached best explanation of nitication I need

is the closest description of what I need to create. If anyone can point me in the right direction I would be very grateful.

I tried searching on the internet. I have created a flash notification and can figure out an alert but "sticky" popup dialog box I cannot find. To be able to scroll and have an unintrusive, untimed, notification or dialog box as my school calls them this is the assignmentschool assignment.

CodePudding user response：

You can use window.alert("Hello World") to open a pop up you are trying to define.

CodePudding user response：

One way of doing it with good animations, is to create an element with a position: fixed in CSS.

then push the element outside of the screen by a 100% of it's width with transform: translateX().

then add a class to it that returns the element to its original position with the same CSS function.

you can add or remove the class using JavaScript through an onclick attribute on the HTML element or adding a click listener on the element

check this demo

CodePudding user response：

<!DOCTYPE html>
<html>
<body>

<p>
Here is your HTML Content
</p>

<div id="pop_up">
<div id="close_pop_up">X</div>
    Here is your text
</div>

<style>
#pop_up{
   background: gray;
   position: absolute;
   width: 100px;
   height: 100px;
   right: 20px;
   bottom: 20px;
}
</style>
<script>
 const closePopUp = document.getElementById("close_pop_up");
 closePopUp.addEventListener("click", () =>{
     document.getElementById("pop_up").style.display = "none";
 });
</script>

</body>
</html>

In your HTML code you can add a element that have an absolute position and will be your pop-up.

<div id="pop_up">
    Here is your text
</div>

#pop_up{
   position: absolute;
   width: 100px;
   height: 100px;
   right: 20px;
   bottom: 20px;
}

This is the first step if you want a sticky notification on your website.You can change the values of the css above depending on your needs. Now if you want to close it you need to 1. add you x to you element:

<div id="pop_up">
  <div id="close_pop_up">X</div>
  Here is your text
</div>

Add a listener with javascript to hide the notification when you cilck on the X.

 const closePopUp = document.getElementById("close_pop_up");
 closePopUp.addEventListener("click", () =>{
     document.getElementById("pop_up").style.display = "none";
 });

You can add this script in a <script></script> just before the end on the enclosure tag body of your html.

CodePudding user response：

This notification will be at the bottom even if you will scroll.

function addNotification(){
//create notification
const NotiElement = document.createElement("div");
NotiElement.id = "stickyNotification";
NotiElement.style.display = "block";
NotiElement.style.position = "absolute";
NotiElement.style.width = "290px";
NotiElement.style.height = "90px";
NotiElement.style.padding = "10px";
NotiElement.style.borderRadius = "5px";
NotiElement.style.border = "1px solid black";
NotiElement.style.backgroundColor = "red";
NotiElement.style.right = "10px";
NotiElement.style.bottom = "10px";
NotiElement.innerHTML = " <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.</span><div id='closeBtn'>X</div>";
document.body.appendChild(NotiElement);
//keep it always at the bottom corner of the window
document.addEventListener("scroll", (event) => {
    let btmPos = -window.scrollY   10;
    NotiElement.style.bottom = btmPos   "px";
  });
  //add close event to remove child
document.getElementById("closeBtn").addEventListener("click", (event) => {
    document.body.removeChild(NotiElement);
  });
}
//call function
addNotification();

#stickyNotification #closeBtn{
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
}
#stickyNotification #closeBtn:hover{
    color: white;
    cursor: pointer;
}
body{
height: 200vh;
}