Best Free JavaScript Modal Window Plugins


Best Free JavaScript Modal Window Plugins

You can find plenty of pure CSS modals but these don’t offer the same control as JavaScript. With a JavaScript modal, you can add custom animations, UI inputs, and really enhance the user experience.

But, why design something from scratch when you can use a JS library? I have collected the best free JavaScript-powered modal scripts here for you to peruse and single out your favorites.

All of these are completely free and open-source, so you can edit the code and restyle them to fit your site as needed.

1. Tingle

Tingle.js plugin

One of my favorite free modal scripts is Tingle.js. It’s built on vanilla JavaScript with no dependencies, so you don’t need any jQuery or Zepto libraries.

Plus, it’s a fairly small library, although it does have a lot of options for customization. You can change the CSS transitions, the JavaScript modal animations, and the whole user experience with just a few settings.

Tingle.js is designed to be fully accessible and responsive, so it works on mobile devices and supports older browsers, too.

You can see all the documentation on GitHub, along with the free source code. They also have a demo link, so you can check out Tingle in action to see if it could fit on your website.

2. Vanilla Modal

Vanilla Modal JavaScript plugin

Here’s a modal I just found recently and it’s a whole lot simpler than most. Vanilla Modal stands true to its name with a pure vanilla script powering the modal, along with CSS transitions.

This thing is pretty small and super flexible, with custom CSS to restyle the windows. It also has quite a few options you can alter with JavaScript, making it perfect for running DOM functions or even callback functions.

Take a peek at the demo page to see the default style. It’s a really basic design, so it’ll require customizations to use it on a production site. But this also cuts down on the total code requirements, so it’s one of the slimmest JavaScript modal libraries.

3. SweetAlert2

Sweetalert2 modal

I loathe default JavaScript alerts because they’re just annoying and obtrusive. In this era of web design, we simply don’t need default browser alerts, especially with scripts like SweetAlert2.

This free JavaScript library comes with zero dependencies and works just like a modal window. However, it supports OK/Cancel inputs from the user, so you can design these and use them like alert boxes, too.

You won’t need any other scripts, so SweetAlert2 runs pretty light. Take a look at the demos to see how the modals look like in a real web page. SweetAlert2 is a perfect solution for stylish modal alert boxes.

4. plainModal

plainModal JavaScript plugin

If you want a really simple script I highly recommend plainModal. It is built on jQuery, but it’s one of the smallest modal scripts available.

It does not use any external CSS or image files. Just one single JS script is all you need.

Once the plainModal script is added to your page, you just target the modal button and you’re good to go. This grants you control over the display and how much you want to alter the modal interface.

Plus, you can set up the modal with one line of JavaScript keeping with the minimalist theme of this plugin.

5. Modaal

Modaal plugin

There’s no denying accessibility is huge on the web. Every designer’s goal should be a more inclusive experience for people around the world on various devices & with possible limitations.

With Modaal, you get that perfect experience which passes the WCAG 2.0 test with a solid AA accessibility rating. You can see a fantastic example on the main page, along with some code documentation.

Overall, I recommend this vanilla JavaScript plugin for anyone who really cares about accessibility. The AA rating can be required on some web projects, so Modaal is a really handy script to keep bookmarked.

6. Scotch JS Modal

Custom JavaScript tutorial

The development team at publish tutorials and guides for coders. Their work is incredible and it really shows in this JavaScript modal script, hosted on the Scotch GitHub.

The modal was developed by Ken Wheeler and this script even has a full tutorial if you want to learn how it works. However, the free code should be enough for most developers since this is super lightweight and easy to set up. No dependencies, and even a sample demo on CodePen.

7. Bootbox.js

Bootbox.js plugin

The fastest way to launch a new web project is through Bootstrap. It’s a powerful frontend framework that encourages developers to create their own add-ons to the library.

One such example is Bootbox.js, a small JavaScript library, designed solely for modal windows in Bootstrap. It actually works on dialog boxes where the user can click OK or cancel, based on your request.

Typical JavaScript dialogs are awful, just like alert boxes. The Bootbox script offers a solid alternative for anyone working in the BS3/BS4 ecosystem.

Again, it’s totally free and open-source, along with a lengthy documentation page to get you up & running fast.

8. iziModal.js

iziModal.js plugin

If you need a solution a little more customized check out iziModal.js. This tool is fully responsive and designed to work in all modern browsers perfectly.

I’ve yet to find another modal script that offers such an aesthetically pleasing design. It comes out the gate with a gorgeous UI that can blend into practically any website. However, you can also restyle the design to suit your needs.

Just note this plugin does run on jQuery, so it’s one of the few here that has a dependency. But, if you want the iziModal styles it’s a small price to pay for such sleek popover windows.

9. jQuery Modal

jQuery modal

The jQuery Modal plugin is perhaps the simplest modal script on jQuery you’ll ever find.

It can be programmed to automatically bind with certain HTML elements based on various attributes. It also supports keyboard shortcuts such as ESC for closing the window.

In total, this plugin measures less than 1KB and it works in every possible browser you can imagine. jQuery developers should keep this plugin saved for quick access to a simple modal script without the extra frills.

10. PicoModal

PicoModal plugin

Getting back towards vanilla JavaScript, we have the PicoModal library. This is probably one of the smallest scripts you’ll find and it’s designed to run perfectly on a vanilla JavaScript backbone.

It supports all modern browsers, including mobile browsers for Android and Mobile Safari for iOS. It even supports older IE browsers, dating back to IE7!

PicoModal’s developer created a small JSfiddle script to demonstrate how it works. This is a very small example and it’s not tied to a click event or anything else, but it’s not hard to script in a few toggle buttons to run this modal window properly.

11. Avgrund

Avgrund plugin

Avgrund is probably one of the most unique modals in this list. It uses a custom page fading effect, along with a shrinking animation to bring the modal right into view.

Not everyone will appreciate this animation, so I can’t say this script would fit every website. But, it is a pure vanilla modal and it’s super easy to set up, with just a CSS and a JavaScript file.

Take a look at the demo page to see how it runs. It’s certainly got a unique style and is bound to grab attention with the custom animations that just work.

Final words

No matter what you’re looking for, I’ll bet there’s something in this list to suit your needs. But, if you’re still not satisfied browse through GitHub for related modal scripts and see what else you can find.

Published at Mon, 06 Nov 2017 13:01:40 +0000

read more

Effective Principles in Website Design


Considering that website design is not mainly for the sake of attracting the attention of your website visitors, but the design focuses on marketing. Think of a web design as a strategy to provide leads and sales. A great design can boost the entire set up of your website which is why you’ll need to have a kind of design that speaks about the products or services and how it works. To further understand, here are principles in making an effective website design.

  1. Have a visual hierarchy
  2. Proportions
  3. Hick’s Law
  4. Visual Communication
  5. Gestalt Design Law

1. Have a visual hierarchy

Keep your eyes to the goal. An online business grows because of the design that you have provided for visitors to understand clearly what you’re offering. Most people are visual learners which is why they want to see products or services that can be beneficial to them. Keep in mind that there are certain areas on your website that are essential to visitors. Certain parts of the website such as providing a click button. For example, adding a “cart” button for consumers to buy products or services.

You must have objectives, and it is important that you are planning your specific goals. Prioritize the details of your business website to make sure that your consumers or visitors will not be disoriented.


2. Proportions

To making things aesthetically convenient and pleasing are to provide definite proportions. Working on a website is not simply slacking all your ideas in it but you have to create it in such a manner that it doesn’t complicate and loading time of the website is faster as well. Keep in mind that visitors do not have the patience to wait that long for a web page to load. For example, determine your layout width and height thus uses formulas that create proper proportions for your website.


3. Hick’s law

This pertains to providing information content and details to your website design. Just like a restaurant menu, you have options to choose and an option to walk way and look for another restaurant. So, that is hick’s law is all about? To make sure that you’re able to provide good experience is to eliminate distracting options to choose.


4. Visual communication

Of course, a website design wouldn’t be that great without adding images. Through visual contents, you can communicate well with your visitors and improve your sales as well.


5. Gestalt design law

You are technically providing an eye trick for visitors to purchase a product or services from you. The principle behind the Gestalt design law is that it makes you see the items presented first before you dig into the details.


In conclusion, to have an effective website design is to understand that it is not an art. This focuses more on your business goals and what you can provide for the people to benefit. It takes time for a business website to grow, but in the latter end, it is financially rewarding.

read more

Designing A Realistic Chronograph Watch In Sketch


Designing A Realistic Chronograph Watch In Sketch

[unable to retrieve full-text content]



If you’re into wristwatches, like me, and are also a fan of the Sketch app (or just want to get better at it), then this is the tutorial for you. In it, you will learn how to create a very realistic and detailed vector illustration of a watch using basic shapes, layer styles and cool Sketch functions such as “Rotate Copies” and “Make Grid.”

Designing A Realistic Chronograph Watch In Sketch

You’ll learn how to apply multiple shadows and how to use gradients, and you will see how objects can be rotated and duplicated in special ways. No bitmap images will be used, which means you will be able to easily adapt the final image to different sizes and resolutions.

The post Designing A Realistic Chronograph Watch In Sketch appeared first on Smashing Magazine.

Published at Thu, 05 Oct 2017 11:57:42 +0000

read more

User Testing as a Design Driver:Looksery created a product for users, not designers


User Testing as a Design Driver:Looksery created a product for users, not designers

You may have recently seen an abundance of bug-eyed people puking rainbows on Snapchat. Thank Looksery for that. Launched last year as an entertainment app based on face recognition technology and special effects, Looksery was acquired by Snapchat last month.

Donald Trump Looksery rainbow puke

Looksery technology propels Snapchat’s new special effects

Founded in 2013, Looksery launched in October 2014 after successful crowdfunding on Kickstarter. I recently spoke with lead designer Lidiya Bogdanovich to learn about their design process and how user experience testing transformed their app from good to GREAT.

What was the original concept for the app?

Looksery was always meant to be an entertaining app that demonstrates face detection technology in a fun way, like a video-messenger for you and your friends.

Looksery and Snapchat's facial recognition

Looksery’s facial recognition on the left, Snapchat’s seemingly identical facial recognition on the right (via Tech Crunch)

What was your role? How big was your team? What type of team members did you have?

It was design made by designers for designers and that is not what we wanted

Since the very beginning of Looksery I was the only designer. On later stages (post launch) our design team grew up to three people. We were a small team and we were doing everything possible for our product to blossom, so we didn’t have very strict responsibility borders of or clearly defined roles.

Startup members usually need to be able to perform multiple tasks and we were lucky to have the crème de la crème” of design society.

And how did you go about designing the product?

At first we relied on speculation and past experience, using on our professional knowledge and more than ten years of design experience. We wanted our app to appear as innovative as possible so we used trendy UI features. It looked awesome.

It was design made by designers for designers and that is not what we wanted. The first user testing showed that people didn’t get how to use it. At the end of the day we wanted all users to enjoy our technology without even thinking about UI.

Looksery sample effects

A sample effects survey

Talk a little bit about user testing. How did you administer the user tests?

We tried a lot of approaches at first. But step-by-step we figured out what our mistakes were and proceeded with our “polished” method. First we defined our audience. If we’re an entertainment app, who do we entertain? We decided that the main audience would be teenagers, students, and young people who are active in social media.

Every week we were communicating with our audience in both private testing (when we are talking about UI) and general testing (we were gathering people all together and showing them our special effects, to define which ones they’d use).

While conducting one-on-one testing we were trying to create a friendly relaxed atmosphere, giving our users simple tasks and asking them to comment everything they do while drinking coffee and eating cookies. That way you really see what your user is about, not when they feel like they are a lab mice.

We did testing every other week—even if it was small. That gave us flexibility to react, in case we were doing something wrong. Testing started long before the first launch and proceeded until the very end and, which was very important.

We ended up changing the UI completely after we started testing. At first we wanted to be like all those apps with awesome design that people post screenshots of on design web sites. But it appeared that those apps come and go. Really awesome apps that people like and use on a daily basis, those ALWAYS have a very simple, easy-to-use design.

And this is what we wanted to be. Not a screenshot on a UI design gallery, but an app that you open every day to chat with your friends.

Could you talk more about your user test findings?

The main problem was that people just wouldn’t hold camera the right way, so the face wouldn’t detect and the technology wouldn’t reveal itself—users needed strong lighting to capture their face sufficiently.

We needed to simplify the experience—to instruct the user on what to do without being annoying or making the app look complicated (because no one wants to play with a complicated app). We tried tons of concepts and none of them worked. But after enough testing we figured out that the best results were using walkthrough screens. So we decided to work in that direction.

Looksery initial walkthrough screens

Initial walkthrough screens

Looksery updated walkthrough screens

Simplifying the user experience. Why use eight words when you only need three?

We hired a model and a photographer and created new screens. The results were much better this time, but there were still room for improvement. What did we do then? We reduced the length of the titles, and added a “hint” arrow, showing what to pay attention to. We still were getting some funny results but it was working much better.

Any other major problems that you uncovered during testing?

Another problem was with a placeholder-picture that illustrated the photo-filters—the instagram-looking ones that are currently present in every camera.

Looksery initial filter options

A few initial filter options

After looking through lots and lots of pictures we decided to go with a parrot because it had the best color scheme and the most optimal contrast and detalization. That brought up other issues. We started getting “why am I pressing it I’m not getting a parrot-look” complains but that is part of the learning process!

What are your major takeaways from the process?

A few things:

  1. Choose the right audience. If you are making app for professional taxi drivers, testing it on your teenage sister or your grandma (unless she is professional taxi driver) is not an option.
  2. Create a real environment where the app is meant to be used. If it’s a navigation app, test it while walking on the street or riding in a car. If it’s the kitchen recipes app, test it while cooking in the kitchen.
  3. Install the test app on a familiar device. Try to find something very similar rather than testing on a foreign device—people get used to their devices and other operational system and new phones can cause a lot of stress and irritation. In our case, people didn’t want to take selfies or test the sharing option on our devices, because they were afraid that those pictures can go public or used in the wrong way.
  4. Find and work with the optimal amount of people. With too few test subjects the result are not representative. With a huge number of subjects, the process might be time-consuming or expensive. Our optimal amount of users is five to seven people and certainly no more than 10. If you have major problems in your app, you’ll realize it after fourth or fifth person.
  5. Identifying the problem doesn’t necessarily mean the identification of its cause. You have to dig deeper. This is probably the most important point.

Vogue uses Looksery

Vogue using another filter (full animation here)

Why are people are not sharing? Is the sharing button hidden? The button doesn’t look like a sharing button? Or people just don’t want to do it on your device while you are watching?

That’s extremely helpful. What is the next step for the product? Besides making the initial changes, how do you hope to use your learnings moving forward with product development?

As of a few weeks ago we are now part of a Snapchat team. Lots of celebrities are now using the app, such as Miley Cyrus (Miley Cyrus using Looksery Technology), Kim Kardashian, John Legend, Jimmy Fallon, models of New York fashion week. But me talking about Snapchat is a whole different story

Kardashian uses snapchat

Kim Kardashian West using Snapchat’s new features

My personal goal is to share our design experience, showcasing our mistakes and our attempts to make it better, to help others in their design process. People may choose not do user testing, rely instead on their own design experience, but I hope my experience will help someone in creating new awesome projects.

Published at Mon, 05 Oct 2015 17:56:53 +0000

read more

CSS Grid Challenge: Winners and Templates


CSS Grid Challenge: Winners and Templates

[unable to retrieve full-text content]



CSS Grid is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it. Some folks assume that CSS Grid is just a replacement for table layouts or Flexbox — but that’s simply not true. Some also think that they can use CSS Grid to replicate more advanced print layouts, which brings us all closer to what’s possible. Obviously print isn’t web, but we can experiment with some of the techniques from print on the web, too.

CSS Grid Challenge 2017: The Winners

One of the main reasons behind the idea of the CSS Grid Challenge was to have some starting points for layouts, and show what can be achieved with CSS Grids today. Well, we received some many great submissions that it was really hard to choose the one winner — there are so many submissions who deserve to win first place.

The post CSS Grid Challenge: Winners and Templates appeared first on Smashing Magazine.

Published at Fri, 06 Oct 2017 12:55:18 +0000

read more

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)


Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

[unable to retrieve full-text content]



Editor’s Note: We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F. We highly encourage more teams to share the lessons they learned when building design systems or pattern libraries, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article.

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

Today, there are nearly 30,000 U.S. federal websites with almost no consistency between them. Between the hundreds of thousands of government employees working in technology, there’s nothing in common with how these websites are built or maintained.

The post Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study) appeared first on Smashing Magazine.

Published at Mon, 09 Oct 2017 12:42:32 +0000

read more

Designers, Calculate the Perfect Aspect Ratios with RatioBuddy


Designers, Calculate the Perfect Aspect Ratios with RatioBuddy

Designers know the pain of trying to match images to ratios. This happens all the time when you’re building a WordPress theme and trying to figure out the best image sizes for thumbnails.

But, there are dozens of similar tasks for figuring out the proper aspect ratio of an image, video, or embedded element. Thankfully, RatioBuddy can help.

This small web app lets you calculate aspect ratios of anything dynamically from your browser. All you need is Internet access and the proper size you want (or the aspect ratio required).

RatioBuddy web app

To start, all you do is enter the current image aspect or the size you’re thinking of using. Let’s do an example for building a WordPress theme and choosing a featured image size.

Let’s say you want your featured image to measure 800px wide by 500px tall. Enter this into RatioBuddy and you’ll get an aspect ratio of 8:5.

What you can do now is lock the ratio by clicking the small padlock to the side. This means if you change either the width or height values then the other will update accordingly.

Now, you can start finding thumbnail sizes to match your primary feature image.

So, let’s say you want a thumbnail size of about half that width (400px), then another even smaller at 300px. You know how wide you want the images, but how tall should they be?

With the padlock enabled, you just change the width value and you’ll immediately see the results in the height value box.

RatioBuddy example resizing ratio

Pixel values update immediately and you’ll even get custom CSS code you can copy and paste if you want to create an element at this ratio.

You can also use this web app to auto-calculate the size of YouTube embeds to keep your video ratios even. Or, you can use it to generate ideas for image gallery thumbnails.

Really, for anything to do with aspect ratios, this tool is a lifesaver. So, be sure to bookmark it if you do a lot of photo work and resizing for the web.


Published at Thu, 05 Oct 2017 13:01:07 +0000

read more

Bringing Relevant Content into your Designs


Bringing Relevant Content into your Designs

Many important considerations impact software design. Business goals, user goals, user context, cultural considerations, platform paradigms, branding requirements, devices … the list goes on and on. While a primary focus for any software design effort should be the data or other content that’s being displayed, this keystone element is often given short shrift. This is unfortunate and shortsighted. Given the focus it your content will receive, it should be a primary consideration during the design process.

It is a common practice to represent data and content as “Lorem ipsum,” repeating data, or simply using “best case scenario” data. In reality, this isn’t what will be experienced in the final product. The data you have to work with can drastically affect the final design, and the design will influence the type, format, and presentation of data.

Infusing Real Content into Your Designs

Whether you’re using Sketch, Photoshop, or another design tool, it’s worth your time to explore ways of bringing real data or content into your static designs. On one side of the spectrum, this may simply mean having an understanding of what that data might be and putting together sample content that maps to it. On the other end, your tool of choice may support different plugins or have features baked in that allow you to infuse sample or live data into your designs.


At Tack Mobile, we use a variety of tools for creating static designs and we’re always on the lookout for new methods that may benefit our process. As far as working with data and content, Sketch has some good options:

Short of using a tool, it’s always possible to manually input content that you and your team have decided best represents what might be expected in a production environment.

The data you have to work with can drastically affect the final design

While these plugins are useful, it’s easy to imagine how they might be taken further. Often we find ourselves creating multiple variations of the same screen and changing out content to see how the design holds up. Or, we may be designing for multiple languages and use a similar process. It’d be great to automate those types of explorations.

Working with static screens can help a lot to work through ideas. The next step for filling in some of the gaps is prototyping. There are a lot of methods and tools for assembling prototypes that meet different goals. Some make it really easy to work with data sources.

Prototyping Means Data, Too

As you move into the prototyping phase, there may be more options for working with live or sample data and content, especially while working in code. The data can also drive the creation of elements in your prototype, which can save a lot of time from redundantly creating each element individually. We often use Framer.js for prototyping, but these sources can apply to other approaches as well.


Local Data

One way to work with data is to refer to it locally. This can be a separate file constructed by hand, an exported set from another source, or embedded directly into your working files. Working with local data, it’s easy to go through quick cycles of modification and see how it affects the design.

Existing Data Services

If you have a specific set of data in mind that you want to work with, you want to explore some data services that are already available. For example, Dribbble, Random User, Instagram and many other products offer ways to access their data. You may even want to browse ProgrammableWeb API Repository to see if there’s something there you can use.

Google Sheets

Working with spreadsheets is something a lot of people are familiar with. With Google Sheets, you can share a table of data that you’re working on with others. As others make changes, you’ll be able to see those changes affect your design. You can also access and work with separate sheets within a Google Sheet. Check out this article to learn how you can use Google Sheets for prototyping.

Google Sheets for prototyping


Why create a model for your data when one may already exist? Kimono makes it easy to create an API out of a web page. For example, if you want to represent a series of articles in your design, you can find another site that has a representation of that type of data and bring that into Kimono.

You can also use Kimono to grab data from your own services that already exist without having to deal with the overhead of connecting directly.


Take your prototypes to another level by enabling the ability to read and write data. Parse is a mobile platform that, among other things, supports the ability to create a data store. You can have a prototype that brings in a list of data records but also add the ability to create new ones as well.

There are already some great articles out there that walk through how to use Parse. Check out Using Parse to power up your Framer prototypes and Give your Framer prototypes a better memory for step-by-step walkthroughs.


Recently acquired by Google, Firebase is basically a very powerful real-time data syncing solution. It uses a NoSQL-style schema-less strategy, which can give prototypers exactly what they need to prove out an idea.

Keep Firebase in mind when you’re prototyping project reaches the phase where multiple users may be involved at a time, or when you’re thinking about a data structure but haven’t landed yet. Not only that, but with Google scale behind it, Firebase can grow with your product well beyond the prototyping phase.

If you’re interested, you may want to check out this example posted to the Framer.js Facebook Group that uses Firebase, or this great video tutorial.

Production Services

You may want to try working directly with production services used by your project. It can also help ensure teams are working with the same data, so there are no surprises. Depending on the goals, this can be useful for design or hinder any exploration of new ideas.

Keep Content in Mind

In the future, as you’re designing your next great interface, think about how data and content plays a role. Do you have enough room to display what you want? What takes priority? How will you deal with a slow data connection? What does the interface look like before the data is loaded? Many of these questions can be answered the more you make an effort to bring data into your designs.

Image of paper bird courtesy Shutterstock.


Published at Tue, 06 Oct 2015 18:44:43 +0000

read more