{!-- /** * JCOGS OTP Pro - Pattern 3a: AJAX Modal Overlay (Custom Implementation) * ======================================================================= * * Advanced demonstration of custom AJAX login with modal OTP overlay. * Shows how to build your own AJAX implementation using the add-on's * action URLs and API. Features complete custom JavaScript handlers. * * Features: * - AJAX form submission (no page reload) * - Modal overlay for OTP entry * - Custom form handling and state management * - Error handling and loading states * - Remember device option * - Back button support * * Template Group: jcogs_otp_pro_examples * Default Success URL: /jcogs_otp_pro_examples/user_otp_settings * Requires: ajax-helpers.js from add-on themes directory * CSS/JS Path: __CSS_JS_PATH__ (replaced during installation) * Note: Inline JavaScript demonstrates custom AJAX implementation * * @category ExpressionEngine Template * @package JCOGS OTP Pro * @author JCOGS Design * @copyright 2026 JCOGS Design * @license https://jcogs.net/add-ons/license/jcogs_otp_pro * @version 2.0.4 * @link https://JCOGS.net/ */ --} Pattern 3a: Modal Overlay - JCOGS OTP Pro

Pattern 3a: Modal Overlay (AJAX)

Modern AJAX login with OTP appearing in a modal overlay. No page reloads.

← Back to Examples Index

Sign In to Your Account

Forgot password? • Create account

Implementation Notes

  • Modern UX: No page reloads, smooth transitions
  • AJAX-Based: Requires JavaScript and AJAX helper library
  • Modal Overlay: OTP appears in focused modal dialog
  • Accessibility: Proper ARIA attributes, keyboard navigation, focus management
  • Best For: Modern web apps, single-page applications, mobile-first design
  • Requires: otp-ajax-helpers.js library