Cooler modal popup example – how to open multiple popups, scrolling pop ups per page

Some time back I came up with a cooler modal pop up window using CSS3 and JavaScript specifically for mobile webkit browsers. The example that I presented had only a single button, a click on it would open a modal pop up window.

In this post I have a similar example but this time multiple pop ups can be opened from the same page. Opening multiple pop up’s from a single page was requested by some of my readers. And here it is. I will not go deep into explaining the bits and parts of how to create a pop up window. You can go through my previous post for that. But first let’s check a demo (meant only for web-kit based browsers):

Demo link (open in iOS or Android’s browser, you can also test this in Chrome or Safari in your computer) :  http://rialab.jbk404.site50.net/coolermultiplemodalpopup/

Open multiple pops from a single page

How to run this in Firefox, IE and other browsers?
For this you need to make changes in the CSS file. Add CSS3 prefixes for other browsers similarly as it is there for -webkit- . CSS3 junkies would already know what I am talking about.

Advertisements

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.

Sliding touch panels for mobile web – HTML5, CSS3

Update: Before you move further, if you are looking for a more responsive sliding panel, so when changing to landscape or re-sizing the browser window, the panels automatically respond without a browser refresh then you might want to look at it here (I have a separate post regarding this)

In this tutorial I will discuss about creating a sliding touch panel meant for mobile web apps. You must have seen, that in iPhone or iPod settings when you tap on a menu item the whole panel slides out and a detailed panel slides in. I am going to talk exactly on how to create something similar for iPhones and Android devices using CSS3 transitions and a little bit of java script. Even those who have worked with mobile web apps using Sencha Touch must be aware of sliding touch panels. Before moving on check out the demo on an iPhone or Android device,

Demo: http://jbk404.site50.net/css3/slidingtouchpanel/

You can check the demo in a desktop browser also – Google Chrome or Safari.

The concept
The concept is to have two equally sized panels horizontally laid out inside a wrapper container. The wrapper occupies the dimensions of the mobile device. The size of each panel is same as the wrapper. Now, the wrapper has overflow as hidden so you only see one panel at a time. Now that the basic set up is done, we just need to move the two panels left and right. The image below visualizes the things that I have spoken above.

Read More »

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

Read More »

Rounded corners using CSS3

Rounded corners for a div or any container holding your contents in your page looks cool, isn’t it. Good news is that  the latest versions of all the major web browsers support CSS3. So you can use the CSS3  border-radius property directly to create rounded corners. For example to create a 10 pixel border radius this is how it would look. And this works for all browsers.

{
border : 1px solid #afafaf;
border-radius: 10px;
}

There is not much of a work you need to do as you would have done earlier with complex code for handling background images for rounded corners.

CSS3 border-radius compliance for all browsers

Here is an image that shows the compliance table for all major browsers (latest versions at the time or writing this entry). Click here to see a very nice compliance test.

CSS3 compliance table for border-radius

Read More »