One-Click Pop-up

DESCRIPTION

Building modern pop-up dialogs in e-learning can be a real challenge. It often involves multiple layers and complex setups. That’s why I created this custom pop-up feature to make life easier for us. This tool blurs the background and smoothly adds a sleek, customizable pop-up to your course. It's inspired by Apple’s minimal design and adds a familiar, polished touch that learners will recognize and appreciate. No coding headaches, just click, add your content, and engage your learners effortlessly.

SEE IT WORKING IN A COURSE

Curious to see the pop-up feature in action? Check out this LIVE DEMO I created in an Articulate Storyline course. Go ahead, give it a try and see how your courses can pop (pun intended)!

HOW TO USE

1. Copy the Pop-Up Code: Here’s the JavaScript code you need to add a sleek pop-up to your eLearning course: Show Code
   // Popup Trigger Function function showPopup() { // Create the overlay const overlay = document.createElement('div'); overlay.style.position = 'fixed'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; overlay.style.backdropFilter = 'blur(10px)'; overlay.style.zIndex = '9999'; overlay.style.display = 'flex'; overlay.style.justifyContent = 'center'; overlay.style.alignItems = 'center'; overlay.style.animation = 'fadeIn 0.5s ease-out'; // Create the popup container const popup = document.createElement('div'); popup.style.background = 'linear-gradient(135deg, #ff6b81, #6b72ff, #1e90ff)'; popup.style.color = '#fff'; popup.style.padding = '40px'; popup.style.borderRadius = '30px'; popup.style.boxShadow = '0 15px 40px rgba(0, 0, 0, 0.3)'; popup.style.maxWidth = '400px'; popup.style.textAlign = 'center'; popup.style.fontFamily = 'Arial, sans-serif'; popup.style.position = 'relative'; popup.style.animation = 'popIn 0.6s ease-out'; // Add a glowing border effect popup.style.border = '2px solid rgba(255, 255, 255, 0.2)'; popup.style.boxShadow = '0 0 15px rgba(255, 255, 255, 0.3)'; // Add heading const heading = document.createElement('h2'); heading.textContent = 'Welcome to the Future!'; heading.style.marginBottom = '15px'; heading.style.fontSize = '24px'; heading.style.textShadow = '0 0 10px rgba(255, 255, 255, 0.8)'; popup.appendChild(heading); // Add message const message = document.createElement('p'); message.textContent = "I'm your supercharged popup! I'm here to dazzle, inform, and look insanely cool while doing it. Customize my text and let's make learning fun! "; message.style.fontSize = '16px'; message.style.lineHeight = '1.6'; popup.appendChild(message); // Add close button const closeButton = document.createElement('button'); closeButton.textContent = '✕'; closeButton.style.position = 'absolute'; closeButton.style.top = '10px'; closeButton.style.right = '10px'; closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; closeButton.style.color = '#fff'; closeButton.style.border = 'none'; closeButton.style.borderRadius = '50%'; closeButton.style.width = '32px'; closeButton.style.height = '32px'; closeButton.style.cursor = 'pointer'; closeButton.style.fontSize = '18px'; closeButton.style.transition = 'transform 0.2s, background-color 0.3s'; // Close button hover effect closeButton.addEventListener('mouseover', () => { closeButton.style.transform = 'scale(1.2)'; closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.4)'; }); closeButton.addEventListener('mouseout', () => { closeButton.style.transform = 'scale(1)'; closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; }); // Close the popup when the close button is clicked closeButton.addEventListener('click', () => { overlay.remove(); }); popup.appendChild(closeButton); overlay.appendChild(popup); document.body.appendChild(overlay); // Close the popup when clicking outside of it overlay.addEventListener('click', (e) => { if (!popup.contains(e.target)) { overlay.remove(); } }); // Add keyframe animations to the document head const style = document.createElement('style'); style.textContent = ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { 0% { transform: scale(0.7); opacity: 0; } 80% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } } `; document.head.appendChild(style); } // Trigger the popup showPopup();
2. Open Your Authoring Tool: Launch your favorite authoring tool like Articulate Storyline, Adobe Captivate, or any other tool that supports JavaScript.
3. Add a Button or Shape: - Insert a button and label it or insert a shape of your choice.
   - For a modern look, add a sleek info icon or a custom graphic to the shape or the button.
4. Add a Trigger to the Button: - In Articulate Storyline:
   1. Select the button or shape.
   2. Open the Triggers Panel.
   3. Click “Create a New Trigger”.
   4. Set the options:
   - Action: Execute JavaScript
   - When: User clicks the button
   - In Adobe Captivate:
   1. Select the button or shape.
   2. Go to the Properties Panel.
   3. Under the Actions tab, set On Success to “Execute JavaScript”.
5. Paste the JavaScript Code: In the JavaScript editor, paste the code you copied earlier.
6. Modify the Pop-Up Content: Want to customize the heading and message? Here’s how:
   - To change the heading: Look for this line in the code: heading.textContent = 'Welcome to the Future!'; Replace 'Welcome to the Future!' with your own text (keep the double quotes!).
   
   - To change the message: Look for this line in the code: message.textContent = "I'm your supercharged popup! I'm here to dazzle, inform, and look insanely cool while doing it. Customize my text and let's make learning fun! "; Replace the text inside the double quotes with your custom message.
   
   That’s it! Just be careful not to remove the double quotes or change the structure of the code.
7. Preview or Publish and Test: - Preview Your Project:
   - In Storyline: Click “Preview” > “This Slide” or “Entire Project”.
   - In Captivate: Click “Preview” > “Project”.
   
   - Publish Your Project (Optional):
   - In Storyline: Go to Publish > Web or your preferred format.
   - In Captivate: Go to Publish > Publish to HTML5.
   
   - Test the Pop-Up:
   1. In the preview or published project, click the button or shape you added.
   2. The pop-up should appear with your custom heading and message.
   3. Ensure everything works as expected and the design looks sleek and polished.

JOIN ME IN MAKING BETTER TOOLS

Building custom tools for instructional design takes a lot of creativity, time, and (let’s be honest) a lot of caffeine! My goal is to create features that help us build more engaging and learner-centered courses. If you’ve found these tools helpful, your support means the world. It helps me keep creating, improving, and sharing new solutions for the community.