如何在纯HTML CSS和JS中创建粘性通知

33qvvth1 于 2023-02-06 发布在其他

关注(0)|答案(4)|浏览(377)

大家好，我需要为学校创建3个不同类型的对话框，但它的措辞方式，我无法找到如何做到这一点的网上信息。我需要创建一个粘性弹出窗口是unintrusive！到屏幕和untimed。关闭单击x在弹出窗口。我有一个咆哮通知已经是定时的。现在我不'我甚至不知道该找什么，因为互联网让我在圈子里转，我附加的图像best explanation of nitication I need
是对我需要创造的东西最接近的描述。如果有人能给我指出正确的方向，我将非常感激。
我试着在互联网上搜索。我已经创建了一个闪光通知，可以找出一个警报，但“粘性”弹出对话框，我找不到。为了能够滚动，并有一个不打扰，不定时，通知或对话框，因为我的学校称他们这是作业school assignment。

css

来源：https://stackoverflow.com/questions/75353839/how-to-create-a-sticky-notification-in-plain-html-css-and-js

4条答案

按热度按时间

af7jpaap1#

即使您滚动，此通知也会显示在底部。

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;
}

赞(0）回复(0）举报 2023-02-06

whlutmcx2#

您可以使用window.alert（“Hello World”）打开您试图定义的弹出窗口。

赞(0）回复(0）举报 2023-02-06

ni65a41a3#

一种制作好动画的方法是用CSS中的position: fixed创建一个元素。
然后用transform: translateX()将元素按其宽度的100%推出屏幕。
然后向其添加一个类，该类使用相同的CSS函数将元素返回到其原始位置。
可以使用JavaScript通过HTML元素上的onclick属性或在元素上添加单击侦听器来添加或删除类
check this demo

赞(0）回复(0）举报 2023-02-06

aemubtdh4#

<!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>

在HTML代码中，您可以添加一个具有绝对位置并将成为弹出窗口的元素。

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

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

这是第一步如果你想在你的网站上有一个粘性通知。你可以根据你的需要改变上面css的值。现在如果你想关闭它你需要1.把你的x添加到你的元素：

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

1.用javascript添加一个监听器，当你点击X时隐藏通知。

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

您可以将这个脚本添加到<script></script>中html的enclosure标记主体的末尾之前。

赞(0）回复(0）举报 2023-02-06

我来回答

如何在纯HTML CSS和JS中创建粘性通知

4条答案

相关问题

热门标签

最新问答