Cooler modal Popup window with fade effect – gradient colors, border, drop shadow and center position

1,728 views

Published on

In one of my earlier post I talked on creating a cool modal pop up window using CSS3 and JavaScript. It had fade effect upon opening and closing of the pop up. Based on the same lines, I have created a much cooler pop up, actually asked by one of my readers. It now has gradient colors, much more eye catching – vibrant color , it has a header, a content area, border, drop shadow and it is also now centrally positioned always, even if you go from portrait to landscape mode and vice-versa.
For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/07/20/cooler-modal-popup-window-with-fade-effect-gradient-colors-border-drop-shadow-and-center-position/

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
1,728
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cooler modal Popup window with fade effect – gradient colors, border, drop shadow and center position

  1. 1. Cooler modal Popup window with fade effect – gradient colors, border,drop shadow and center positionJULY 20, 2012 6 COMMENTS (EDIT)In one of my earlier post I talked on creating a cool modal pop up window using CSS3 and JavaScript. It had fadeeffect upon opening and closing of the pop up. Based on the same lines, I have created a much cooler pop up,actually asked by one of my readers. It now has gradient colors, much more eye catching – vibrant color , ithas a header, a content area, border, drop shadow and it is also now centrally positioned always, even if you gofrom portrait to landscape mode and vice-versa.Look at the demo first (you can view in both mobile webkit browsers – iOS ,Android and desktop browers – Chrome,Safari):http://rialab.jbk404.site50.net/coolermodalpopup/The concept remains the same. I have discussed it in details in my previous post. Just refer that in case it is not clear.In this post, I will just talk briefly on the changes that I have implemented.HTML changesNo major changes. I just externalized the CSS and JavaScript. So they are now in external files, which I reference inthe index.html file. The HTML code is very simple and self explanatory. Download the code and check it out. Adownload link is provided below.
  2. 2. JavaScript changesI have made some changes in the architecture of the popup creation. The showPopUpMessage() function now takesa header, main content, width and height parameters.//show the modal overlay and popup windowfunction showPopUpMessage(modalWindowHeader,modalWindowContent,width,height) { //code goes here}Since this new pop up has a header, so I have kept a separate method for the header. You can call a function tocreate the header content and then set it in the showPopUpMessage() function. This will help if you have multipleinstances of pop up to create. Here is the function,/* Common header for Pop Ups */function createPopUpHeader(title){ //return the header after creating //create header for modal window area modalWindowHeader = document.createElement("div"); modalWindowHeader.className = "modalWindowHeader"; modalWindowHeader.innerHTML = "<p>" + title + "</p>"; return modalWindowHeader;}Similarly, I have kept a separate function to create the contents of the modal pop up. You can customize the methodand change the contents. Again, this will help in creating more than one pop up window. Here is how I have done itfor this example,function createPopUpContent(msg){ //return the content after creating
  3. 3. //create modal window content area modalWindowContent = document.createElement("div"); modalWindowContent.className = "modalWindowContent"; modalWindowContent.innerHTML = "<p style=text-align:center; margin-top:10px;>" +msg + "</p>"; //create the place order button okBtn = document.createElement("div"); okBtn.className = "redBtn okBtn"; okBtn.innerHTML = "<p>OK</p>"; okBtn.addEventListener(endEvent,function(){ hidePopUpMessage(); },false); modalWindowContent.appendChild(okBtn); return modalWindowContent;}And now once I have the header and the content I can call the showPopUpMessage() function to launch the pop up,showPopUpMessage(createPopUpHeader("This is a cool popup"),createPopUpContent("I am acool modal pop up. I have gradient colors, border colors, drop shadow and I am alwayspositioned at the center!!"),250,300);I have passed a width of 250 and a height of 300. You can change it as per your requirement.Positioning the modal pop up always at the centerThis is done by calculating the window width and height and then subtracting it by the popup width and height andthen dividing by 2. This is how I did it,modalWindowElement.style.left = (window.innerWidth - width) / 2 + "px";modalWindowElement.style.top = (window.innerHeight - height) / 2 + "px";Now, to keep the window always at the center, even when you resize the browser window or move from portrait tolandscape and then back to portrait, I have registered a window resize event listener and then calculate the left andtop position again as we did above. You can find this is inside the handleResize() function.
  4. 4. //when window is resizedwindow.addEventListener("resize",handleResize,false); //resizing is useful only whenpopups are openedAnd finally one more change. In this example, if you see at the top of the javascript file, I have detected if the devicebrowser is touch enabled. And then accordingly I register touch based events for touch devices and mouse events fordesktop devices. So this is a common code and you do not have to hardcode anything. I have a separate post forthis, you can go through it.Style changesOnly new class selectors have been added for the modal window header, modal window content, gradient buttons.Rest of them is pretty simple and understandable.So this is it. This is a much cooler pop up, better looking than my previous boring and dull pop up. Hope you haveenjoyed it. Check out the demo or download the code.

×