Cool modal Popup window with fade effect for mobile web – CSS3 and JavaScript

In this tutorial I will talk about creating a very cool modal popup window for iPhone and Android using CSS3 and Javascript. The modal popup window will display a message with fade-in and fade-out effect. It will also have drop shadows, rounded corners, gradient background which I will apply using the latest CSS3 techniques. I have a demo app already created. Click on the Launch PopUp button to open the modal window and then tap outside the modal window to close it.

Link to demo: http://jbk404.site50.net/css3/modalwindow/

The app is meant for mobile web and you can view it in iPhone/iPod or Android or even Blackberry mobile web browsers. But nevertheless you can check it out on Google Chrome and Safari which are web-kit based browsers, in your computer.

Modal PopUp window

What is a modal popup window?
A window dialog box with a message that opens up in the browser page on top of every other component in the page. So it is a popup window. The user cannot interact with the controls in the background until the popup window is hidden, hence it is a modal window. A transparent dark background usually covers the entire page beneath the popup window – our modal overlay. You can see it in the demo.

Getting started
I have a basic HTML page setup as you can see in the demo. The HTML code block is below,

<section id="wrapper">
  <header>
    <span>Modal PopUp</span>
  </header>
  <article>
    <input type="button" value="Another button" />
    <br />
    <p>Tap on the Launch PopUp button below to open the modal window. And then tap outside the window to close it. There is another button above which shows that you cannot interact with it while the popup is open.
    </p>
    <br />
    <input type="button" id="popUpBtn" value="Launch PopUp" />
  </article>
</section>

Everything is wrapped inside a wrapper element. This is mainly to create a full screen mobile web app. I have already talked about it in one of my earlier post here. Coming back to the HTML block above, I have a header at the top and then the content area which has the instruction message and the two buttons. When user taps on the Launch PopUp button the modal window shows with a transparent background. For the modal popup window I will create two things – a modal overlay which will act as the transparent background, and then the popup window with the message. I will create these two elements dynamically in java script and then append it to the document body.

Creating the modal overlay transparent background
First let us see how to create the transparent background. Let me officially call it modal overlay from now onwards as I have been using the terms interchangeably quite a lot.
The action starts only when user clicks on the launch button so I do not have the modal overlay element written in the HTML code block. I will create the overlay element in java script and then append it to the body. To give it a dark transparent background I will use simple CSS. Also one thing to notice is that the modal overlay occupies the entire browser page’s dimension. We can achieve this by setting the width and height to 100% in CSS. The overlay is supposed to appear over all other controls in the page so that user cannot interact with them in the background. Now, how do I do that? The answer is simple. Once the overlay element is created in java script, we append it to the document body, so it is at the top of the DOM stack and all other elements come below it. This gives it the modal behavior. While the overlay is open you cannot interact with the components beneath it. Also you can specify a higher z-index value in CSS, if you want. Now, let’s check out the java script code and the CSS below,

var overlayElement = document.createElement("div");
overlayElement.className = 'modalOverlay';
document.body.appendChild(overlayElement);

The CSS

.modalOverlay
{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  background:#000;
 opacity:0;
  -webkit-transition: opacity 0.3s ease-in;
  z-index:101;
}

Initially the opacity is set to 0. Later, I will set the opacity to a value higher than zero (but less than 1 so that it is transparent) in the script. I will talk about this in a moment. Also another CSS3 property –webkit-transition is set to make the change of opacity smooth. This will give it the fade-in effect.

Creating the popup window and displaying the custom message
Now that our modal overlay is done, let’s see how to deal with the actual pop up window that will display our custom message.
The concept is similar to that of the overlay window we have just created. I will create it in java script and then append it to the body. The custom message will be displayed inside the popup window element using the innerHTML property. Here is the necessary script,

var modalWindowElement = document.createElement("div");
modalWindowElement.className = 'modalWindow';
modalWindowElement.innerHTML = msg;
modalWindowElement.style.left = (window.innerWidth - 200) / 2 + "px";
document.body.appendChild(modalWindowElement);

The fourth statement modalWindowElement.style.left positions the popup in the center of the page horizontally. Now, let’s see the CSS for our popup window.

.modalWindow
{
  position:fixed;
  top:150px;
  margin:0;
  border:2px solid #fff;
  width:180px;
  /*height:30px;*/
  text-align:center;
  word-spacing:2px;
  line-height:15px;
  font-weight:bold;
  font-size:13px;
  color:#fff;
  padding:10px;
  opacity:0;
  z-index:102;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7c9bc0), color-stop(2%, #416086), color-stop(100%, #293e56));
  -webkit-border-radius:8px;
  -webkit-box-shadow:-1px 2px 12px rgba(0, 0, 0, 0.91);
  -webkit-transition: opacity 0.3s ease-in;
}

The last four style rules are meant for background gradient color, rounded corners, and drop shadow and then I have added a transition to the opacity of the popup to give it a fade effect.

Adding the fade effect
To add the fade-in effect to both the overlay and the popup I set the opacity to a value higher than 0. You can see in the script below, I have set an opacity of 0.4 to the overlay to make it transparent. The popup window gets opacity of 1 as expected. This change in opacity from earlier values of 0 will trigger the transition that we have set in CSS and will make the change happen over time and smoothly. This gives it a fade-in effect.

setTimeout(function() {
  modalWindowElement.style.opacity = 1;
  overlayElement.style.opacity = 0.4;
  overlayElement.addEventListener("click", hidePopUpMessage, false);
}, 300);

I have added a timeout value of 300ms so that the change in opacity happens after the elements have been added to the DOM and rendered properly.
If you are still not clear about fade effects in CSS3, you can go through a dedicated tutorial on it from one of my earlier post, here.

Creating rounded corners, gradient background, and drop shadow
These can be done very easily now with CSS3. So I will not explain much. You can go through my blog and find out enough materials on it. These effects give the popup window a realistic look and a 3d effect, as if it is floating over the browser window.

Hiding the popup window
Now that the popup window is displayed, we also need to hide it. The process is simple and just the reverse of displaying it. When you tap outside the popup it is hidden. So I have a specific function for it that is called when user taps on the overlay outside the popup window. Inside the function I set the opacity to 0 again, to give it a fade-out effect and then remove the elements from the DOM. You can check out the code along with the full script below,

<script type="text/javascript">
var overlayElement = null;
var modalWindowElement = null;
window.addEventListener('load', initApp, false);

function initApp() {
  setTimeout(function() { window.scrollTo(0, 1); }, 10);
  document.getElementById("popUpBtn").addEventListener("click", function() {
    showPopUpMessage("TADAAAA !<p>This is my cool pop up window with rounded corners, gradient background and drop shadow.</p>");
  }, false);
}
//show the modal overlay and popup window
function showPopUpMessage(msg) {
  overlayElement = document.createElement("div");
  overlayElement.className = 'modalOverlay';
  modalWindowElement = document.createElement("div");
  modalWindowElement.className = 'modalWindow';
  modalWindowElement.innerHTML = msg;
  modalWindowElement.style.left = (window.innerWidth - 200) / 2 + "px";
  document.body.appendChild(overlayElement);
  document.body.appendChild(modalWindowElement);
  setTimeout(function() {
    modalWindowElement.style.opacity = 1;
    overlayElement.style.opacity = 0.4;
    overlayElement.addEventListener("click", hidePopUpMessage, false);
  }, 300);
}
//hide the modal overlay and popup window
function hidePopUpMessage() {
  modalWindowElement.style.opacity = 0;
  overlayElement.style.opacity = 0;
  overlayElement.removeEventListener("click", hidePopUpMessage, false);
  setTimeout(function() {
    document.body.removeChild(overlayElement);
    document.body.removeChild(modalWindowElement);
  }, 400);
}
</script>

Conclusion
This was a simple tutorial on creating a very nice popup window displaying a custom message. While the focus was based on mobile devices such as iPhone, iPod and other smart phones with web-kit browsers, you can certainly use it for desktop applications as well. The example already runs in Google Chrome and Safari browsers. You can modify it (mainly the CSS) to run on all other desktop browsers as well. Below is the link to the demo once again, check it out in your iPhone/iPod/Android or Blackberry browser. For the full code refer the source.

Link: http://jbk404.site50.net/css3/modalwindow/

If you do not have one, check it out in an online iPhone simulator:  http://www.iphonetester.com/

Updates
1) Using iScroll javascript library I have been able to scroll the content inside the modal pop up window and its look the native scrolling. I have written a new post on it along with a new example. You can find it here: A look at iScroll – native way of scrolling content in mobile webkit

2) A much cooler pop up with gradient colors, colorful button, drop shadow, border, header, content area, centrally positioned – always. I have a new post with a demo and a download link.
http://jbkflex.wordpress.com/2012/07/20/cooler-modal-popup-window-with-fade-effect-gradient-colors-border-drop-shadow-and-center-position/

Click to see new demo - Open in Chrome or Safari

About these ads

39 thoughts on “Cool modal Popup window with fade effect for mobile web – CSS3 and JavaScript

  1. How do I get the message to scroll within the popup window please

    Thanks for this – everything works fine otherwise

  2. Hey, Thanks so much for this.
    Any way of putting an image into the pop up, I would like to use mine as a social networking portal on a mobile website.
    I can work out how to do it, I just want to know if it is at all possible before I crack away at it.

    Thank you! :)

      • Thank you! Another quick question, how would I be able to make this work on multiple buttons on one page. Changing “ID” to “class” – would this mean I have to relook at the entire JS?

      • Yes you can definitely make this work for multiple buttons. No you do not need any id’s or class names. Just create multiple buttons and add event listeners to them, where-in you call the showPopUpMessage(htmlString) and pass the html string as argument. Do this for multiple buttons, but make sure you use unique id’s for each of your buttons in html.

        document.getElementById(“popUpBtn”).addEventListener(“click”, function() {
        showPopUpMessage(“TADAAAA !

        This is my cool pop up window with rounded corners, gradient background and drop shadow.

        “);
        }, false);
        Hope this helps…….Thanks.

  3. Pingback: A look at iScroll – native way of scrolling content in mobile webkit « Joseph's RIA Lab

  4. Thank you so much for this, i have been looking all over for something like this, but I have one question. Can the button be an image or a clickable area over an image instead of an actual button? I thank you for any help that you may provide.

    • Hi Breanna,

      Yes, instead of the button you can use a

      and a background image for that div and make it clickable. This will server the same purpose as the button.

      Thanks.
      Joseph

  5. Pingback: Cooler modal Popup window with fade effect – gradient colors, border, drop shadow and center position « Joseph's RIA Lab

  6. yo jo,
    i need to make the button(s) in the modal the only way to close the modal. so, when you click on the background nothing happens. only when you click on the button does it take action. any suggestions?

  7. it really is something that i want! just i want to ask, can the pop up be automatically popped up once the user load the page? im not sure whether i have asked a stupid question… but im just so new to this and i really hope that u can help!

    • Stefany,
      Yes, you can do that. You can call the pop up to open anytime you like it to. This is how to do it,

      window.onload = showPopUpMessage(“TADAAAA !

      This is my cool pop up window with rounded corners, gradient background and drop shadow.

      “);

      So call the showPopMessage() function with your message inside it in the window.onload event. So this will open the pop up after the page loads.

      Thanks

  8. and if i wanna add image into the popup message…. do i just add a into the code like the following??? seems it does work for me… sorry for bothering but i really need this code >__<

    showPopUpMessage("TADAAAA !This is my cool pop up window with rounded corners, gradient background and drop shadow.”);
    }, false);

  9. showPopUpMessage(“.”);
    }, false);

    haha im sorry i forgot to include my code.. this seems didnt work at all??

  10. That is really fascinating, You’re a very skilled blogger. I’ve joined your feed and sit up for in search of extra of
    your wonderful post. Also, I’ve shared your web site in my social networks

  11. Hi Joseph, great work. I’m a relative noob with scripting, so would appreciate your help. I have multiple modals working on one page, touch screen works as well, except for one issue. If I scroll the browser window the modal overlay does not scroll. This means that the background where the modal overlay is not displaying is not a clickable event – so the popup will not close. So the bug that needs fixing is to fill the browser window dynamically. Can this be done? Regards, Simon

    • Hi Simon,

      The modal overlays are not scrolling since I have used position: fixed in the CSS. Try making the following change in your .css file,

      .modalWindow
      {
      position: absolute;

      Try setting position: absolute for modalWindow in the CSS file.

      The modal window will scroll now.

      Joseph

  12. Joseph, I hope you are still monitoring this post. I am a noob and am building my very first app in HTML5 and based on the Baker Framework. I have a page with multiple images that I would like to create a modal for each one. I want the modal window to contain the image and more information about the image. When I try to implement multiple modals on the same page and I click on an image, it pops up the modal window for the first image, no matter which one I select. How do I make each modal window its own, related to the selected image, and not open the first reference to the modal window on my page? Your guidance and recommendations are much appreciated!

  13. Pingback: In Page Popup With Faded Background - Remove Spyware, Malware and Viruses

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s