How to generate a popup window like that in Google maps using Jquery or Jquery plugin?

Question

When you use Google Maps, you click a marker on a map, then a window will pop up. You can even enter your mobile phone number and receives a sms from Google. How to generate that popup window using Jquery or Jquery plugin?

Answer 1

I'm assuming Google Maps is merely an example of the effect you want, and not your project-base:

This is really nothing more than showing a specific div, and later hiding it.

$("a.popup1").click(function(e){
  e.preventDefault();
  $("div.popup1").toggle();
});

-

<a class="popup1" href="enable-javascript.html">Show Popup</a>
<div class="popup1"><p>This is where your data goes.</p></div>

-

If Google Maps is actually your project-base, I would suggest checking out jMaps, a jQuery Google Maps Plugin. Examples of adding Markers and pointHTML (those windows you speak of) can be found here: http://github.com/digit...Google.Markers.AddMarker.html

Answer 2

There are all sorts of variations, but basically what you'll do is:

1. to start off, add a "div" to the document (or to some container element, depending on what your site looks like)
2. run an AJAX transaction to fetch the content for your little popup (if it's not there on the page hidden somewhere already)
3. give the div appropriate CSS u want class attributes to style it the way you want (importantly, to make it visible :-)

Among the things your pop-up box should contain is a button or some other control to allow it to be removed. You can use the jQuery offset() function to find the page position of something that was clicked on, and then the position information (top left corner) can be used to position your floating element. Your floating element should probably be positioned with absolute positioning and given a "z-index" value that's bigger than the surrounding content.

Exactly how you do this really depends a lot on what your site looks like, how the other content is arranged and positioned, and how you get/synthesize the content of the popups.