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

360 degree car rotation – common code for mobiles and computer browsers

I had been updating my examples and tutorials off  lately and trying to create a more general approach to application development – Write a single app that runs in mobile browsers as well as computer browsers. Following the same approach, this time I am updating one of my previous tutorials – 360 Degree Car/Product rotation for iPhones. So, I worked on a 36o degree car rotation code that runs in both mobile and desktop browsers.

This tutorial is an update to my previous one, I also present a new demo. I will not go into the details, which I have talked about in my previous tutorial. Have a look at the demo, open it in either an iOS browser or a computer web-kit browser.

Link: http://jbk404.site50.net/360DegreeView/mobile/common.html

360 degree car rotation in mobile safari

What are the changes?

All the changes are in the javascript code. I have introduced a device detection mechanism and then automatically assign either touch events (for mobiles) or mouse events (for computer browsers). These are the same changes that I have recently talked of in my last post – Replicating the iPhone Swipe Gesture — common code for mobiles and computer browsers. That should help you out.

Other than that just try the example link in a computer web-kit browser – Chrome/Safari or an iOS device browser which is also a web-kit browser. Android devices need some changes and the same code might not work. I have talked on this in my previous post.

For the code, right click to view the source.

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.

360 degree Car/Product view for mobile web – iPhone

I thought of writing this post due to increasing number of search queries that I found out on my site stats. A 360 degree product view for mobile web is important now as lot of manufacturers are starting to move towards mobile web apps for displaying their products.
In two of my earlier posts I have already talked about a 360 degree product view for desktop browsers with examples – post 1, post2. For the 360 degree to run on a mobile browser I had to make some adjustments – make the sprite much smaller in size, add touch gestures. The rest of the concept is same. So, in this post I will talk on how to make the 360 degree for iOS devices (iPhone,iPod and iPads).
I have already discussed about the core concept of changing the position of the background image (sprite image) with the movement of the mouse in my earlier posts. And how it detects the distance moved and the direction of movement and based on that the car is rotated. So I will not go into it once again. You can refer my earlier tutorial. I will just talk a little on the touch gestures and how to convert the already developed example (from my earlier post) so that now it listens to finger gestures on the mobile device.
Before moving further you deserve a demo, open the following link in your iOS device browser and drag your finger over the car.

Demo link: http://jbk404.site50.net/360DegreeView/mobile/

360 degree car rotation in mobile safari

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 »

Calling phone numbers from web page – iPhone and Android

Ever wandered how to call a person’s number from your mobile phone browser by clicking a link or by pressing some button in your web page. Here is a quick example of how to call a phone number from your HTML page. The same technique works fine for both iPhone and Android’s web kit browsers.

From HTML (hyperlink)

<a href="tel:555-678-1234">Click to call</a>

From JavaScript

  function call() {
      window.location.href = 'tel:555-678-1234';
  }

And then you can add your custom styles using CSS. Pretty simple but very effective sometimes.