Alert Vs Custom Alert in html css and javascript code-JS Tutorial-php.cn

Alert Vs Custom Alert in html css and javascript code

Mary-Kate Olsen

Release： 2024-10-31 09:31:29

Original

302 people have browsed it

Alert Vs Custom Alert in html css and javascript code

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert Box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="button-container">
        <!-- Button to Trigger Default Alert -->
        <button class="btn default-alert-btn">Default Alert</button>

        <!-- Button to Trigger Custom Alert -->
        <button class="btn custom-alert-btn">Custom Alert</button>
    </div>

    <!-- Custom Alert Box -->
    <div class="custom-alert" id="customAlert">
        <h1>Warning</h1>
        <span class="alert-text">This is a custom alert with a close
             option and animated border!</span>
        <button class="close-btn">&times;</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

Copy after login

CSS CODE

/* Reset */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1a1a1a;
  font-family: Arial, sans-serif;
  color: #fff;
}
/* Button Styling */
.button-container {
  display: flex;
  gap: 20px;
}
.btn {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

.default-alert-btn {
  background-color: #4285f4;
  color: white;
}

.custom-alert-btn {
  background-color: #ff5722;
  color: white;
}

.btn:hover {
  transform: scale(1.05);
}

.custom-alert {
  position: fixed;
  top: 50px;
  /* left: 50%; */
  width: 400px;
  padding: 5px;

  background-color: #333;
  color: #fff;
  border-radius: 10px;
  display: none;
  opacity: 0;
  transform: translateX(-50%);
  animation: fadeIn 0.5s forwards;
  /* Animated border effect */
  border: 1px solid transparent;
  border-radius: 10px;
  background-image: linear-gradient(#333, #333),
    linear-gradient(45deg, #ff5722, #4285f4, #0f9d58, #f4b400);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.1);
}

/* Multicolored border animation */
@keyframes borderAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.custom-alert {
  animation: fadeIn 0.5s forwards, borderAnimation 3s linear infinite;
  background-size: 200% 200%;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-text {
  display: inline;
}

.close-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #ff5722;
}

Copy after login

JAVASCRIPT CODE

// Buttons
const defaultAlertBtn = document.querySelector('.default-alert-btn');
const customAlertBtn = document.querySelector('.custom-alert-btn');
const customAlert = document.getElementById('customAlert');
const closeBtn = document.querySelector('.close-btn');

// Show Default Alert
defaultAlertBtn.addEventListener('click', () => {
    alert("This is the default alert.");
});

// Show Custom Alert
customAlertBtn.addEventListener('click', () => {
    customAlert.style.display = 'block';
    setTimeout(() => {
        customAlert.style.opacity = '1';
    }, 10); // Delay for CSS fade-in effect
});

// Close Custom Alert
closeBtn.addEventListener('click', () => {
    customAlert.style.opacity = '0';
    setTimeout(() => {
        customAlert.style.display = 'none';
    }, 500); // Delay for CSS fade-out effect
});

Copy after login

The above is the detailed content of Alert Vs Custom Alert in html css and javascript code. For more information, please follow other related articles on the PHP Chinese website!