Makluman Vs Makluman Tersuai dalam html css dan kod javascript-tutorial js-php.cn

Makluman Vs Makluman Tersuai dalam html css dan kod javascript

Mary-Kate Olsen

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

asal

302 orang telah melayarinya

Alert Vs Custom Alert in html css and javascript code

KOD HTML

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

Salin selepas log masuk

KOD CSS

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

Salin selepas log masuk

KOD JAVASCRIPT

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

Salin selepas log masuk

Atas ialah kandungan terperinci Makluman Vs Makluman Tersuai dalam html css dan kod javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!