Close Component

Close Button Animation & Events

// Close button with custom animation
document.addEventListener('DOMContentLoaded', function() {
  // Add click handler to all close buttons
  const closeButtons = document.querySelectorAll('[uk-close]');
  
  closeButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Get parent element to close
      const parent = this.closest('.uk-alert, .uk-modal, .uk-card, .uk-tile');
      
      if (parent) {
        // Add fade-out animation
        parent.style.transition = 'opacity 0.3s ease';
        parent.style.opacity = '0';
        
        // Remove element after animation
        setTimeout(() => {
          parent.style.display = 'none';
          
          // Dispatch custom event
          const event = new CustomEvent('elementClosed', {
            detail: {
              element: parent,
              trigger: this
            }
          });
          document.dispatchEvent(event);
        }, 300);
      }
    });
  });
  
  // Programmatic close control
  const closeControl = {
    // Close specific element
    closeElement: function(elementId, animation = true) {
      const element = document.getElementById(elementId);
      if (!element) return;
      
      if (animation) {
        element.style.transition = 'opacity 0.3s ease';
        element.style.opacity = '0';
        setTimeout(() => {
          element.style.display = 'none';
        }, 300);
      } else {
        element.style.display = 'none';
      }
    },
    
    // Close all elements of a type
    closeAll: function(selector) {
      const elements = document.querySelectorAll(selector);
      elements.forEach(element => {
        element.style.transition = 'opacity 0.3s ease';
        element.style.opacity = '0';
        setTimeout(() => {
          element.style.display = 'none';
        }, 300);
      });
    },
    
    // Show closed element
    showElement: function(elementId) {
      const element = document.getElementById(elementId);
      if (element) {
        element.style.display = '';
        element.style.opacity = '1';
      }
    }
  };
  
  // Example usage
  // Close all alerts after 5 seconds
  setTimeout(() => {
    closeControl.closeAll('.uk-alert');
  }, 5000);
});

// Close button with confirmation
function addConfirmClose(buttonId, message) {
  const button = document.getElementById(buttonId);
  if (!button) return;
  
  button.addEventListener('click', function(e) {
    e.preventDefault();
    
    if (confirm(message || 'Are you sure you want to close this?')) {
      const parent = this.closest('.uk-alert, .uk-modal, .uk-card');
      if (parent) {
        parent.style.display = 'none';
      }
    }
  });
}

// Close button with undo functionality
function addUndoClose(buttonId) {
  const button = document.getElementById(buttonId);
  if (!button) return;
  
  const parent = button.closest('.uk-alert');
  if (!parent) return;
  
  button.addEventListener('click', function(e) {
    e.preventDefault();
    
    // Hide the alert
    parent.style.transition = 'opacity 0.3s ease';
    parent.style.opacity = '0';
    
    // Create undo notification
    const undoDiv = document.createElement('div');
    undoDiv.className = 'uk-alert uk-alert-warning uk-position-bottom-center uk-position-fixed';
    undoDiv.innerHTML = `
      <span>Alert closed. </span>
      <a href="#" id="undoClose" class="uk-link">Undo</a>
    `;
    
    document.body.appendChild(undoDiv);
    
    // Undo functionality
    document.getElementById('undoClose').addEventListener('click', function(e) {
      e.preventDefault();
      parent.style.opacity = '1';
      parent.style.display = '';
      document.body.removeChild(undoDiv);
    });
    
    // Auto-remove undo notification
    setTimeout(() => {
      if (document.body.contains(undoDiv)) {
        document.body.removeChild(undoDiv);
      }
    }, 5000);
  });
}

Notification System with Close

<!-- Notification System -->
<div class="uk-notification uk-notification-top-center">
  <div class="uk-notification-message" role="alert">
    <button class="uk-notification-close" type="button" uk-close></button>
    <div class="uk-flex">
      <div class="uk-margin-small-right">
        <span uk-icon="icon: check; ratio: 1.2"></span>
      </div>
      <div>
        <h4 class="uk-margin-remove-bottom">Success!</h4>
        <p class="uk-margin-remove-top">Your profile has been updated successfully.</p>
        <div class="uk-text-small uk-text-muted">Just now</div>
      </div>
    </div>
  </div>
</div>

<!-- Multiple Notifications -->
<div class="uk-notification uk-notification-top-right">
  <!-- Warning Notification -->
  <div class="uk-notification-message uk-notification-message-warning" role="alert">
    <button class="uk-notification-close" type="button" uk-close></button>
    <div class="uk-flex">
      <div class="uk-margin-small-right">
        <span uk-icon="icon: warning; ratio: 1.2"></span>
      </div>
      <div>
        <h4 class="uk-margin-remove-bottom">Storage Limit</h4>
        <p class="uk-margin-remove-top">You've used 85% of your storage space.</p>
        <div class="uk-progress uk-progress-small uk-margin-small-top">
          <div class="uk-progress-bar" style="width: 85%;"></div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Info Notification -->
  <div class="uk-notification-message uk-notification-message-primary" role="alert">
    <button class="uk-notification-close" type="button" uk-close></button>
    <div class="uk-flex">
      <div class="uk-margin-small-right">
        <span uk-icon="icon: info; ratio: 1.2"></span>
      </div>
      <div>
        <h4 class="uk-margin-remove-bottom">New Feature</h4>
        <p class="uk-margin-remove-top">Try our new dark mode feature!</p>
        <button class="uk-button uk-button-small uk-button-default uk-margin-small-top">Try Now</button>
      </div>
    </div>
  </div>
</div>

Modal with Multiple Close Options

<!-- Modal with Multiple Close Options -->
<div id="imageModal" class="uk-modal-full" uk-modal>
  <div class="uk-modal-dialog uk-modal-body">
    <!-- Close button outside modal -->
    <button class="uk-modal-close-outside" type="button" uk-close></button>
    
    <!-- Close button inside modal -->
    <button class="uk-modal-close-default uk-position-top-right uk-position-small" type="button" uk-close></button>
    
    <div class="uk-grid-large" uk-grid>
      <div class="uk-width-2-3@m">
        <img src="large-image.jpg" alt="Large Image" class="uk-width-1-1">
      </div>
      <div class="uk-width-1-3@m">
        <h2 class="uk-modal-title">Image Details</h2>
        <p>This is a high-resolution image with detailed description.</p>
        
        <div class="uk-margin">
          <h4>Tags</h4>
          <div class="uk-flex uk-flex-wrap">
            <span class="uk-label uk-margin-small-right">Nature</span>
            <span class="uk-label uk-margin-small-right">Landscape</span>
            <span class="uk-label">Photography</span>
          </div>
        </div>
        
        <div class="uk-margin">
          <h4>Actions</h4>
          <div class="uk-grid-small" uk-grid>
            <div class="uk-width-1-2">
              <button class="uk-button uk-button-primary uk-width-1-1">
                <span uk-icon="icon: download" class="uk-margin-small-right"></span>
                Download
              </button>
            </div>
            <div class="uk-width-1-2">
              <button class="uk-button uk-button-default uk-width-1-1 uk-modal-close">
                <span uk-icon="icon: close" class="uk-margin-small-right"></span>
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Dismissible Tour Guide

<!-- Tour Guide Steps -->
<div id="tourStep1" class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-bottom">
  <button class="uk-close uk-position-top-right" uk-close onclick="nextTourStep(1)"></button>
  <h3 class="uk-card-title">Welcome to the Dashboard!</h3>
  <p>This is your main workspace. Here you can see an overview of your activities.</p>
  <div class="uk-flex uk-flex-between">
    <div>
      <span class="uk-badge">Step 1 of 5</span>
    </div>
    <div>
      <button class="uk-button uk-button-link" onclick="skipTour()">Skip Tour</button>
      <button class="uk-button uk-button-primary uk-margin-small-left" onclick="nextTourStep(1)">Next</button>
    </div>
  </div>
</div>

<!-- Tour Progress -->
<div class="uk-card uk-card-secondary uk-card-body">
  <div class="uk-flex uk-flex-between uk-flex-middle">
    <div>
      <h4 class="uk-margin-remove-bottom">Getting Started Guide</h4>
      <p class="uk-text-meta uk-margin-remove-top">Complete the tour to unlock all features</p>
    </div>
    <div>
      <button class="uk-button uk-button-default" onclick="restartTour()">
        <span uk-icon="icon: refresh" class="uk-margin-small-right"></span>
        Restart
      </button>
      <button class="uk-button uk-button-text uk-text-danger uk-margin-small-left" onclick="dismissTour()">
        <span uk-icon="icon: close" class="uk-margin-small-right"></span>
        Dismiss Forever
      </button>
    </div>
  </div>
  
  <div class="uk-margin-top">
    <div class="uk-progress">
      <div class="uk-progress-bar" style="width: 20%;"></div>
    </div>
    <div class="uk-flex uk-flex-between uk-text-small uk-margin-small-top">
      <span>20% Complete</span>
      <span>1/5 Steps</span>
    </div>
  </div>
</div>

/* Custom Close Button Styles */
/* Animated Close Button */
.uk-close-animated {
  transition: all 0.3s ease;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
}

.uk-close-animated:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: rotate(90deg);
}

.uk-close-animated:before,
.uk-close-animated:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
}

.uk-close-animated:after {
  transform: translateY(-50%) rotate(90deg);
}

/* Circle Close Button */
.uk-close-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e5e5;
}

.uk-close-circle:hover {
  background: #e5e5e5;
}

/* Text Close Button */
.uk-close-text {
  background: none;
  border: none;
  color: #666;
  padding: 5px 10px;
  font-size: 14px;
}

.uk-close-text:hover {
  color: #333;
  text-decoration: underline;
}

/* Close Button with Icon */
.uk-close-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

.uk-close-with-icon:hover {
  background: #e5e5e5;
}

/* Gradient Close Button */
.uk-close-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.uk-close-gradient:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: scale(1.1);
}

/* Usage in HTML */
<button class="uk-close-animated" type="button" onclick="closeElement()"></button>
<button class="uk-close-circle" type="button" onclick="closeElement()">
  <span uk-icon="icon: close"></span>
</button>
<button class="uk-close-text" type="button" onclick="closeElement()">
  Close
  <span uk-icon="icon: close" class="uk-margin-small-left"></span>
</button>
<button class="uk-close-with-icon" type="button" onclick="closeElement()">
  <span uk-icon="icon: close"></span>
  Dismiss
</button>
<button class="uk-close-gradient" type="button" onclick="closeElement()">
  <span uk-icon="icon: close"></span>
</button>

/* Custom Animation */
@keyframes closePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.uk-close-pulse {
  animation: closePulse 2s infinite;
}

/* Hover Effects */
.uk-close-hover-rotate:hover {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.uk-close-hover-bounce:hover {
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}