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.
Look at the demo first, you can view in both mobile web-kit browsers (iOS ,Android) and desktop browsers (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 changes
No major changes. I just externalized the CSS and JavaScript. So they are now in external files, which I reference in the index.html file. The HTML code is very simple and self explanatory. Download the code and check it out. A download link is provided below.
JavaScript changes
I have made some changes in the architecture of the popup creation. The showPopUpMessage() function now takes a header, main content, width and height parameters.
//show the modal overlay and popup window
function 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 to create the header content and then set it in the showPopUpMessage() function. This will help if you have multiple instances 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 method and change the contents. Again, this will help in creating more than one pop up window. Here is how I have done it for this example,
function createPopUpContent(msg)
{
//return the content after creating
//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 a cool modal pop up. I have gradient colors, border colors, drop shadow and I am always positioned 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 center
This is done by calculating the window width and height and then subtracting it by the popup width and height and then 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 to landscape and then back to portrait, I have registered a window resize event listener and then calculate the left and top position again as we did above. You can find this is inside the handleResize() function.
//when window is resized
window.addEventListener("resize",handleResize,false); //resizing is useful only when popups are opened
And finally one more change. In this example, if you see at the top of the javascript file, I have detected if the device browser is touch enabled. And then accordingly I register touch based events for touch devices and mouse events for desktop devices. So this is a common code and you do not have to hardcode anything. I have a separate post for this, you can go through it.
Style changes
Only 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 have enjoyed it. Check out the demo or download the code.
Download
Download the source code here.
Updates
1) How to open multiple pop ups from one page – Check this post.
26.135685
91.791780
