Skip to content

Popup System

Jump to bottom
Alee Javed edited this page Mar 1, 2026 · 1 revision

Popup System

The popup system creates customizable modal windows with white theme styling, smooth animations, and flexible content management.

💬 Popup Features

Core Functionality

  • Custom Content - Rich text and HTML content
  • White Theme - Clean, modern popup styling
  • Smooth Animations - Fade and slide effects
  • Responsive Design - Works on all devices
  • Trigger System - Multiple trigger options
  • Auto-close - Optional auto-close functionality

Popup Elements

Each popup includes:

  • Overlay - Semi-transparent background
  • Container - White popup container
  • Close Button - Easy to close popup
  • Title - Optional popup title
  • Content - Rich text content
  • Animations - Smooth open/close effects

⚙️ Popup Management

Access Popup Admin

Go to Popups in WordPress admin menu

Create New Popup

  1. Popups → Add New
  2. Popup Title - Give your popup a title
  3. Content - Add your message using rich text editor
  4. Publish popup

Popup Content Options

  • Rich Text Editor - Full formatting options
  • HTML Support - Custom HTML content
  • Shortcodes - WordPress shortcodes
  • Images - Embedded images and media

🎨 Popup Design

Structure

<div class="aj-popup-overlay">
  <div class="aj-popup-container">
    <button class="aj-popup-close" aria-label="Close">×</button>
    <h3 class="aj-popup-title">Popup Title</h3>
    <div class="aj-popup-content">
      <!-- Popup content here -->
    </div>
  </div>
</div>

CSS Classes

  • .aj-popup-overlay - Background overlay
  • .aj-popup-container - Popup container
  • .aj-popup-close - Close button
  • .aj-popup-title - Popup title
  • .aj-popup-content - Content area

Styling

.aj-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.aj-popup-container {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  margin: 50px auto;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

🔧 Advanced Features

CSS Variables

:root {
  --popup-overlay: rgba(0, 0, 0, 0.5);
  --popup-bg: #ffffff;
  --popup-border: #e0e0e0;
  --popup-text: #1a1a1a;
}

JavaScript Interactions

// Popup open/close functions
function openPopup(id) {
  const popup = document.getElementById(`aj-popup-${id}`);
  if (popup) {
    popup.classList.add('aj-popup-open');
    document.body.classList.add('aj-popup-open');
  }
}

function closePopup(id) {
  const popup = document.getElementById(`aj-popup-${id}`);
  if (popup) {
    popup.classList.remove('aj-popup-open');
    document.body.classList.remove('aj-popup-open');
  }
}

Custom Animations

.aj-popup-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.aj-popup-open .aj-popup-overlay {
  opacity: 1;
}

.aj-popup-container {
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;
}

.aj-popup-open .aj-popup-container {
  transform: scale(1);
  opacity: 1;
}

🎯 Popup Triggers

Manual Triggers

<!-- Button trigger -->
<button class="popup-trigger" data-popup-id="123">
  Open Popup
</button>

<!-- Link trigger -->
<a href="#" class="popup-trigger" data-popup-id="123">
  Open Popup
</a>

JavaScript Triggers

// Programmatic trigger
document.addEventListener('DOMContentLoaded', function() {
  const triggers = document.querySelectorAll('.popup-trigger');
  
  triggers.forEach(trigger => {
    trigger.addEventListener('click', function(e) {
      e.preventDefault();
      const popupId = this.getAttribute('data-popup-id');
      openPopup(popupId);
    });
  });
});

Auto-close Options

// Auto-close after 5 seconds
setTimeout(() => {
  closePopup('popup-id');
}, 5000);

// Close on overlay click
document.querySelector('.aj-popup-overlay').addEventListener('click', function() {
  closePopup('popup-id');
});

📱 Responsive Design

Desktop (980px+)

  • Centered popup - 600px max width
  • Full animations - All effects enabled
  • Keyboard navigation - Tab and escape support

Tablet (768px-979px)

  • Slightly smaller - Optimized for tablets
  • Touch-friendly - Larger close button
  • Maintains animations - Core effects preserved

Mobile (0-767px)

  • Full width - Uses full screen width
  • Simplified animations - Performance optimized
  • Touch optimized - Better mobile experience

🔍 Troubleshooting

Popups Not Showing

  1. Check posts - Ensure popups are published
  2. Verify template - Check popup output function
  3. Clear cache - Browser and WordPress cache
  4. Check JavaScript - Ensure popup.js is loading

Animations Not Working

  1. Check CSS - Ensure popup styles are loading
  2. Verify JavaScript - Check popup.js functionality
  3. Test browser - Try different browsers 4 - Check conflicts - Plugin or theme conflicts

Styling Issues

  1. Check CSS - Ensure popup styles are loading
  2. Verify variables - Ensure CSS variables are set
  3. Test responsive - Check different screen sizes
  4. Check z-index - Ensure proper layering

🎯 Customization Options

Custom CSS Examples

/* Custom popup background */
.aj-popup-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid var(--accent);
}

/* Custom close button */
.aj-popup-close {
  background: var(--accent);
  color: white;
  border-radius: 50%;
}

/* Custom animations */
.aj-popup-container {
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

Custom JavaScript

// Custom popup triggers
document.addEventListener('DOMContentLoaded', function() {
  // Auto-open popup after delay
  setTimeout(() => {
    openPopup('welcome-popup');
  }, 3000);
  
  // Close on escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closePopup('welcome-popup');
    }
  });
});

📚 Related Documentation

Clone this wiki locally