My journey with modals started with me having an idea for my personal website. The basic idea was to have several buttons on the left side of the screen with text on the right side on the screen. Each button represented a stage of web development. When the button was clicked a modal would open with more text explaining the step. Below is a screenshot of the design.

The first step I took was searching for modals on Codepen. I found one that demonstated several different animations associated with opening models. I forked this project and hacked out the code that I needed for the animation I was going to use. I added the buttons I needed and played around with the animation to get what I was going for. Here is what ended up being the final prototype that I was going to use in my project.

See the Pen Modal Animations by Gary (@wingsfan70) on CodePen.

The operation was as follows. The user clicked on one of the buttons. Each button has a unique ID. The button ID will determine what text gets displayed in the modal window. I used jQuery to provide the functionality of the buttons.

I like the design and how it came out. When the modal opens it looks quite nice. All my development was done on my desktop computer. Yes this was bit of an oversight on my part. I thought once I got it looking nice on desktop I would throw some media queries in there and make it look good on mobile. This is were my logic breaks down. I did a couple of Google searches on how to best handle modal windows on mobile. It turns out it is very complicated and a lot more goes into it then just some media queries. So after investing around 12 hours of my time into programming and getting the modal window to look just right I decided to drop the modal design all together.

Most of the recommendations from the Google searches said to use either an accordion type design or a slideout in place of the modal. After reviewing several examples on CodePen I decided to go with the slideout method. It fit better in my design then the accordion method. Once again I turned to CodePen for examples of a good slide out. I decided on this one here.

I forked this pen and modified it to fit my use case. Fortunately for me I was able to use much of the jQuery that I had already developed in my modal example and just adapt it to work with the slideout. Here is my final result that I will incoporate into my project.

See the Pen Custom Slideout Panel by Gary (@wingsfan70) on CodePen.

I was very frustrated and disappointed when I learned that it would have been very difficult to make the modal work correctly on mobile. I spent many hours getting it to work and look good on desktop only to have to abandon it. What I learned from this was to do a bit of research prior to jumping in and spending time on a design and then having to scrap the idea because it wouldn't work.


1,529 3 5