A Simple JavaScript Message/Notification Box

.sp-message-container {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;
    max-width: 500px;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.sp-message-show {
    top: 20px;
    opacity: 1;
}

.sp-message-success {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
}

.sp-message-error {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
}

.sp-message-title {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 16px;
}

.sp-message-text {
    font-size: 14px;
}

function ShowMessage(title, message, isSuccess) {
    // Remove existing message if any
    const existingMessage = document.querySelector('.sp-message-container');
    if (existingMessage) {
        existingMessage.remove();
    }

    // Create message container
    const container = document.createElement('div');
    container.className = 'sp-message-container';
    container.classList.add(isSuccess ? 'sp-message-success' : 'sp-message-error');

    // Create title
    const titleEl = document.createElement('div');
    titleEl.className = 'sp-message-title';
    titleEl.textContent = title;

    // Create message
    const messageEl = document.createElement('div');
    messageEl.className = 'sp-message-text';
    messageEl.textContent = message;

    // Append elements
    container.appendChild(titleEl);
    container.appendChild(messageEl);
    document.body.appendChild(container);

    // Slide down animation
    setTimeout(() => {
        container.classList.add('sp-message-show');
    }, 10);

    // Slide up and remove after 1800ms (unless clicked)
    const autoRemoveTimeout = setTimeout(() => {
        container.classList.remove('sp-message-show');
        setTimeout(() => {
            container.remove();
        }, 300); // Wait for slide up animation to complete
    }, 1800);

    // Add click event listener to manually remove
    container.addEventListener('click', () => {
        clearTimeout(autoRemoveTimeout); // Prevent automatic removal
        container.classList.remove('sp-message-show');
        setTimeout(() => {
            container.remove();
        }, 300); // Wait for slide up animation to complete
    });
}

<button type="button" onclick="ShowMessage('Ok', 'Good message', true);">
Test Show Good Message
</button>
<button type="button" onclick="ShowMessage('Error', 'Bad Message', false);">
Test Show Bad Message
</button>

// After successful form submission
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  // Form processing logic here...
  
  // Show success message
  ShowMessage("Form Submitted", "Your message has been sent successfully!", true);
});

// When an API request fails
fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .catch(error => {
    ShowMessage("Error", "Failed to load data. Please try again later.", false);
  });

// When a document auto-saves
function autoSaveDocument() {
  // Save logic here...
  
  ShowMessage("Auto-Saved", "Your document has been saved automatically.", true);
}

// Call this function periodically
setInterval(autoSaveDocument, 60000);

// After a user deletes an item
document.querySelector('.delete-btn').addEventListener('click', function() {
  // Delete logic here...
  
  ShowMessage("Item Deleted", "The selected item has been removed.", true);
});

<button id="addToCartBtn" class="btn btn-primary">
  Add to Cart
</button>

<script>
  document.getElementById('addToCartBtn').addEventListener('click', function() {
    // Add to cart logic here
    const productName = "Wireless Headphones";
    const qty = document.getElementById('quantity').value || 1;
    
    // Show success message
    ShowMessage("Added to Cart", `${qty} × ${productName} has been added to your cart!`, true);
  });
</script>

<div class="code-block">
  <pre id="codeSnippet">
const greeting = "Hello, world!";
console.log(greeting);
  </pre>
  
  <button id="copyCodeBtn" class="btn btn-sm">
    <i class="fa fa-copy"></i> Copy Code
  </button>
</div>

<script>
  document.getElementById('copyCodeBtn').addEventListener('click', function() {
    // Get the text content
    const code = document.getElementById('codeSnippet').textContent;
    
    // Copy to clipboard
    navigator.clipboard.writeText(code)
      .then(() => {
        // Show success message
        ShowMessage("Copied!", "Code snippet copied to clipboard", true);
      })
      .catch(() => {
        // Show error message if clipboard access fails
        ShowMessage("Error", "Unable to copy to clipboard", false);
      });
  });
</script>