自定义点击弹出框

Elik-hb

于 2024-04-23 08:12:53 发布

阅读量162

点赞数 3

分类专栏：纯前端开发文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_65099052/article/details/138066846

版权

纯前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

自定义点击弹出框

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义弹出框按钮示例</title>
<link rel="stylesheet" href="1.css">
</head>
<body>

<button id="myButton">点击我</button>

<div id="notification-container"></div>

<script src="1.js"></script>
<script>
    // 添加点击事件监听器到按钮
document.getElementById('myButton').addEventListener('click', function() {
  // 调用openNotification函数来展示自定义弹出框
  openNotification('success', '通知', '你点击了，哈哈', 1000); // 0 代表不自动关闭弹出框
});
</script>
</body>
</html>

右边弹出框

@keyframes slideOutRight {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
  
    100% {
      opacity: 0;
      transform: translateX(100%);
    }
  }
  
  .notification-box.fadeOut {
    animation: slideOutRight 0.5s forwards;
  }
/* 弹出框的容器样式 */
#notification-container {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 300px;
  }
  
  /* 弹出框通用样式 */
  .notification-box {
    background-color: #f2f2f2; /* 设置背景色 */
    border: 1px solid #ccc; /* 设置边框 */
    border-radius: 30px; /* 设置圆角 */
    padding: 20px;
    margin-bottom: 10px;
    color: #333;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  }
  
  .notification-box h2 {
    margin-top: 0;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
  }
  
  .notification-box p {
    font-size: 14px;
    margin: 15px 0;
    text-align: center;
  }
  
  .close-button {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: transparent; /* 将背景色设置为透明 */
    border: none;
    width: 24px;
    height: 24px;
    font-size: 18px;
    text-align: center;
    line-height: 22px; /* 设置行高，使X居中显示 */
    font-weight: bold;
    color: #999; /* 设置关闭按钮颜色 */
    transition: all 0.3s; /* 添加过渡效果 */
  }
  
  .close-button:hover {
    color: #333; /* 设置鼠标悬停时的关闭按钮颜色 */
  }

左边弹出框

@keyframes slideOutLeft {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
  
    100% {
      opacity: 0;
      transform: translateX(-100%);
    }
}

.notification-box.fadeOut {
    animation: slideOutLeft 0.5s forwards;
}

/* 弹出框的容器样式 */
/* @keyframes slideOutRight {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
  
    100% {
      opacity: 0;
      transform: translateX(100%);
    }
  }
  
  .notification-box.fadeOut {
    animation: slideOutRight 0.5s forwards;
  } */
/* 弹出框的容器样式 */
#notification-container {
    position: fixed;
    top: 70px;
    left: 10px;
    width: 300px;
  }
  
  .notification-box {
    background-color: #e7f0ff; /* 浅蓝色背景 */
    border: 1px solid #3498db; /* 深蓝色边框 */
    border-radius: 10px; /* 设置圆角 */
    padding: 15px;
    margin-bottom: 20px;
    color: #2980b9; /* 深蓝色文字 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif; /* 设置字体 */
    font-size: 14px; /* 设置字体大小 */
    line-height: 1.5; /* 设置行高 */
}


  
  .notification-box h2 {
    margin-top: 0;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
  }
  
  .notification-box p {
    font-size: 14px;
    margin: 15px 0;
    text-align: center;
  }
  
  .close-button {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: transparent; /* 将背景色设置为透明 */
    border: none;
    width: 24px;
    height: 24px;
    font-size: 18px;
    text-align: center;
    line-height: 22px; /* 设置行高，使X居中显示 */
    font-weight: bold;
    color: #999; /* 设置关闭按钮颜色 */
    transition: all 0.3s; /* 添加过渡效果 */
  }
  
  .close-button:hover {
    color: #333; /* 设置鼠标悬停时的关闭按钮颜色 */
  }

js逻辑

// 打开一个通知
function openNotification(type, title, message, duration) {
    // 创建通知元素
    var notification = document.createElement('div');
    notification.className = 'notification-box';
    // 根据类型添加图标HTML
    var iconHTML = '';
/*     switch (type) {
      case 'success':
        iconHTML = '<img src="success-icon.png" alt="Success" />';
        break;
      case 'warning':
        iconHTML = '<img src="warning-icon.png" alt="Warning" />';
        break;
      case 'info':
        iconHTML = '<img src="info-icon.png" alt="Info" />';
        break;
      case 'error':
        iconHTML = '<img src="error-icon.png" alt="Error" />';
        break;
      // 默认不添加图标
      default:
        iconHTML = '';
    } */
    notification.innerHTML = `
      ${iconHTML}
      <h2>${title}</h2>
      <p>${message}</p>
      <button class="close-button" onclick="closeNotification(this)">×</button>
    `;
    
    // 添加到容器
    var container = document.getElementById('notification-container');
    container.appendChild(notification);
  
    // 设置自动关闭
    if (duration > 0) {
      setTimeout(function() {
        closeNotification(notification);
      }, duration);
    }
  }
  
  // 关闭一个通知
  function closeNotification(notification) {
    // 如果notification是button，那么取其parentNode
    if (notification.nodeName === 'BUTTON') {
      notification = notification.parentNode;
    }
    // 开始退场动画
    notification.classList.add('fadeOut');
    // 监听动画结束事件，然后移除通知
    notification.addEventListener('animationend', function() {
      notification.remove();
    });
  }