Heim  >  Artikel  >  Web-Frontend  >  Warnung vs. benutzerdefinierte Warnung im HTML-CSS- und Javascript-Code

Warnung vs. benutzerdefinierte Warnung im HTML-CSS- und Javascript-Code

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 09:31:29297Durchsuche

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>

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

Das obige ist der detaillierte Inhalt vonWarnung vs. benutzerdefinierte Warnung im HTML-CSS- und Javascript-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn