Cool modal Popup window with fade effect for mobile web – CSS3and JavaScriptA post from my Blog: http://jbkflex.wordpress....
hidden, hence it is a modal window. A transparent dark background usually covers the entire page beneath the popupwindow –...
supposed to appear over all other controls in the page so that user cannot interact with them in the background. Now,how d...
The concept is similar to that of the overlay window we have just created. I will create it in java script and thenappend ...
z-index:102;    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7c9bc0),color-stop(2%, #416086), co...
var overlayElement = null;var modalWindowElement = null;window.addEventListener(load, initApp, false);function initApp() {...
}, 300);}//hide the modal overlay and popup windowfunction hidePopUpMessage() {    modalWindowElement.style.opacity = 0;  ...
Upcoming SlideShare
Loading in …5
×

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

4,677 views

Published on

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/
For the full post download the document or visit the blog post link: http://jbkflex.wordpress.com/2012/01/30/cool-modal-popup-window-with-fade-effect-for-mobile-web-css3-and-javascript/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,677
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Cool modal Popup window with fade effect for mobile web – CSS3and JavaScriptA post from my Blog: http://jbkflex.wordpress.com/2012/01/30/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 andJavascript. The modal popup window will display a message with fade-in and fade-out effect. It will also have dropshadows, rounded corners, gradient background which I will apply using the latest CSS3 techniques. I have a demoapp already created. Click on the Launch PopUp button to open the modal window and then tap outside the modalwindow 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 webbrowsers. But nevertheless you can check it out on Google Chrome and Safari which are web-kit based browsers, inyour computer.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
  2. 2. hidden, hence it is a modal window. A transparent dark background usually covers the entire page beneath the popupwindow – our modal overlay. You can see it in the demo.Getting startedI 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 tapoutside the window to close it. There is another button above which shows that youcannot 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 alreadytalked about it in one of my earlier post here. Coming back to the HTML block above, I have a header at the top andthen the content area which has the instruction message and the two buttons. When user taps on theLaunchPopUp button the modal window shows with a transparent background. For the modal popup window I will create twothings – 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 backgroundFirst let us see how to create the transparent background. Let me officially call it modal overlay from now onwards asI 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 theHTML code block. I will create the overlay element in java script and then append it to the body. To give it a darktransparent background I will use simple CSS. Also one thing to notice is that the modal overlay occupies the entirebrowser page’s dimension. We can achieve this by setting the width and height to 100% in CSS. The overlay is
  3. 3. 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 thedocument body, so it is at the top of the DOM stack and all other elements come below it. This gives it the modalbehavior. While the overlay is open you cannot interact with the components beneath it. Also you can specify a higherz-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 istransparent) in the script. I will talk about this in a moment. Also another CSS3 property –webkit-transition is set tomake the change of opacity smooth. This will give it the fade-in effect.Creating the popup window and displaying the custom messageNow that our modal overlay is done, let’s see how to deal with the actual pop up window that will display our custommessage.
  4. 4. The concept is similar to that of the overlay window we have just created. I will create it in java script and thenappend it to the body. The custom message will be displayed inside the popup window element usingtheinnerHTML 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;
  5. 5. 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 haveadded a transition to the opacity of the popup to give it a fade effect.Adding the fade effectTo 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 inthe script below, I have set an opacity of 0.4 to the overlay to make it transparent. The popup window gets opacity of1 as expected. This change in opacity from earlier values of 0 will trigger the transition that we have set in CSS andwill 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 tothe 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 myearlier post, here.Creating rounded corners, gradient background, and drop shadowThese can be done very easily now with CSS3. So I will not explain much. You can go through my blog and find outenough materials on it. These effects give the popup window a realistic look and a 3d effect, as if it is floating over thebrowser window.Hiding the popup windowNow that the popup window is displayed, we also need to hide it. The process is simple and just the reverse ofdisplaying it. When you tap outside the popup it is hidden. So I have a specific function for it that is called when usertaps on the overlay outside the popup window. Inside the function I set the opacity to 0 again, to give it a fade-outeffect and then remove the elements from the DOM. You can check out the code along with the full script below,<script type="text/javascript">
  6. 6. 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 windowfunction 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);
  7. 7. }, 300);}//hide the modal overlay and popup windowfunction 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>ConclusionThis was a simple tutorial on creating a very nice popup window displaying a custom message. While the focus wasbased on mobile devices such as iPhone, iPod and other smart phones with web-kit browsers, you can certainly useit for desktop applications as well. The example already runs in Google Chrome and Safari browsers. You can modifyit (mainly the CSS) to run on all other desktop browsers as well. Below is the link to the demo once again, check it outin 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/

×