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

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.

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

  1. This is great, thank you so much! I just have one more question…can you tell me an easy edit if I want to add more than one button per page? (Next I’ll figure out the iScroll)…

    Also, anywhere to send donation? Or can I pay you for the help you’ve given me?

    Thanks,
    Ellie

  2. Starting to get the hang of it…sorry to sound so ignorant. (Told ya I was a newbie). The prob I’m having is as soon as I put anything else on the page, the OK button doesn’t work and the box won’t close. Would it be possible for you to email me at maxwellellie@gmail.com, that way I can tell you what I’m trying to do instead of taking up space here? (I will pay you to help me, if needed.)
    Thank you,
    Ellie

    • Yes, it will not work. The demo’s are meant for webkit browsers. So, you can make some changes – in place of webkit in the code you can use the corresponding prefix for IE. This will make it work.

  3. Hello and thanks for the tips. But I has looking for a fade in effet like in facebook mobile app or skype for a mobile website. Can you share a how to with that please?

      • Hi There.. First of all.. thank you for all your efforts. I’m trying this:

        But it’s not working. Not sure what I’m doing wrong.

        Thanks.

      • Safari on my iPhone.. My relpy missed blocked my html exmple.. This is what i’m trying:
        body onload=”showPopUpMessage(“Test Header”, “Test Body”,”200″,”200″)

        Thanks.

      • Dean,
        Use single quotes inside the onload event handler like this,
        body onload=”showPopUpMessage(‘TestHeader’,’Test Body’,’200′,’200′)”

  4. Sorry I should elaborate, is it possible to open the dialog when someone visits the site just the once so that they can continue to use the site. In other words it doesn’t open each time they go to the home page again.

    • For that I suppose you have to use cookies or some other feature where you can track how many times the user has visited the page. Based on that you can show the popup. Try using cookies, or if you want this in latest browsers you can try something like localStorage or sessionStorage.

  5. Thanks for the fantastic tutorial Joseph. My knowledge of development is limited but I wanted something like this implemented for one of our websites which isn’t currently compatible with mobiles. The problem was that we had implemented pop out but it was going out of the mobile screen and one had to drag the screen to see the pop message.

    So was searching for something like this when I came across this tutorial. Thanks a ton for this🙂 Now passing this on to my developer for implementation. Much appreciated.

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