🚀 AsyncPop

🤔 The Problem with Native Popups

The browser's native window dialog methods (alert(), confirm(), and prompt()) have a severe operational limitation: they are completely synchronous.

When a native popup opens, it completely freezes the main execution thread of your application. Background data fetches pause, ongoing animations stagger, CSS UI transitions halt, and your users experience a clunky, outdated system overlay that cannot be customized to match your web app's theme.

AsyncPop fixes this entirely. It creates beautiful custom DOM components mimicking the exact API signatures but operates asynchronously utilizing modern JavaScript Promises—keeping your UI responsive and fully dynamic.

🎮 Interactive Live Demo

Click any button below to see the framework in action. Open your device OS settings to toggle between Light and Dark modes—the popups adapt instantly without reloading the page!

🛠️ How to Use

Import the framework directly into your project files. Since it handles all of its own dynamic HTML generation and CSS runtime layout injection on the fly, you do not need to link any external style sheets manually.

1. Include the Library script

<script src="https://cdn.jsdelivr.net/gh/sumitkarn12/asyncpop@latest/dist/asyncpop.min.js"></script>

2. Execute Code inside Async Contexts

Treat them identically to standard sequential browser architecture blocks using simple async / await handles:

async function handleSystemFlow() {
  // --- ALERT ---
  await window.AsyncPop.alert("Operational setup complete!", "System Notice");

  // --- CONFIRM ---
  const dynamicChoice = await window.AsyncPop.confirm("Do you accept the new configurations?");
  console.log(dynamicChoice); // Returns: true OR false

  // --- PROMPT ---
  const userInput = await window.AsyncPop.prompt("Please state your system code identifier:");
  console.log(userInput); // Returns: "User String Inputs" OR null if cancelled
}

🔗 CDN Link Powered by jsDelivr