Introducing: Launchy!

Introducing: Launchy!

Do you ever need to add a modal window to your app or website? No time to code it up yourself and are unsure of which third-party script to add? What’s that? You also want to make sure it’s fully accessible via keyboard and screen reader friendly?

Look no further, friend! Launchy! is a fully accessible, super easy to implement and use, modal window script. It’s free and open source, well tested, and just works!

How do I get Launchy?

There are a couple ways to get your hands on a copy of Launchy!:

Raw file include

  1. Copy and paste the source of launchy.js into a new JavaScript file in your project.

  2. Include the script in your template:

    <script src="js/launchy.js"></script>

Via NPM

Probably the better approach would be to use npm to install the script. This way you get the latest version automatically when it becomes available!

  1. Run the command:

    npm i launchy-modal-window

    This will install the script into your node_modules directory.

  2. Include the script in your template:

    <script src="node_modules/launchy-modal-window/launchy.js"></script>

Now that I have it, how do I use it?

Using Launchy! is super easy!

  1. Add your HTML content to your page or template that you’d like to appear in the modal window, or find some existing content.

    Example:

    <h2>Top 5 Most "Popular" Websites</h2>
<ul>
  <li>Google.com</li>
  <li>Youtube.com</li>
  <li>Facebook.com</li>
  <li>Baidu.com</li>
  <li>Wikipedia.org</li>
</ul>

  2. Now, simply wrap your content with an HTML container with a data-launchy attribute. You also need a data-launchy-text attribute which translates into the launcher control text:

    <div data-launchy data-launchy-text="Popular websites!">
  <h2>Top 5 Most "Popular" Websites</h2>
  <ul>
    <li>Google.com</li>
    <li>Youtube.com</li>
    <li>Facebook.com</li>
    <li>Baidu.com</li>
    <li>Wikipedia.org</li>
  </ul>
</div>

That’s it! Launchy! will detect this div with the data-launchy-* attributes and generate everything required to build the modal window for you!

A note on styling

Launchy! does not come with any styles by default, but does feature lots of CSS classes you can hook into!

Check out the demo styles.scss file for an example on how to use the available classes. Alternatively, try out some custom styling over on the CodePen demo!

  • Check out the source code over on GitHub!
  • You can try this example HTML out over on the CodePen demo!

Let me know what you think and if you try this out, how it went! Find a bug or have an idea? Feel free to open a new issue!

Happy hacking! 💻😄💖

Back to blog