Home >Web Front-end >JS Tutorial >Alert Vs Custom Alert in html css and javascript code

Alert Vs Custom Alert in html css and javascript code

Mary-Kate OlsenOriginal: 2024-10-31 09:31:29362browse

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>

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

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

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!

JavaScript css html alert

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Dynamically Modify PageNext article：How to Dynamically Modify Page

See more

Alert Vs Custom Alert in html css and javascript code

HTML CODE

CSS CODE

JAVASCRIPT CODE

Related articles