Popup on Hover, Close When Clicked

I have used various popups in the past but I want to know if there is something out there that will do just like my topic title said. It will open when I hover over it and then the only way to close it is to click on a ‘close’ link within that popup window.

Here is a good example: www.diap ers.com (remove one spaced).

Hover over the link ‘Cart’ at the upper right of the page.

I looked at the source but I am not familiar with the scripts there and so I was hoping that someone will point to the right direction.

It’s quite very simple process in javascript. If you want actual code then you’ll need to post some html/css of what you’re working with so far. Being honest this is very basic javascript. You’ll do yourself favours by working it out yourself…however here is how i’d do it…in pseudo code :wink:

-Give the popup a css property of display: none.
-Grab a reference to the element you want to use to activate the popup onhover.
-When it’s hovered on set the popup to display: block
-Then from here you need to grab a reference to your close link.
-When the close link is clicked upon set the popup to display: none

So taking your close link as an example it might be easiest to give it an id:

<img id="close" src="imageurl.gif" alt="close popup" />width="xx" height="xx"

and then grab a refrence ot this in javascript is done like so:

var closeLink = document.getElementById('close')

See how you get on with this and come back if you’re stuck :slight_smile:

I question why you would want to use intrusive javascript

There is always the option to close the page.
elduderino did point you in the right direction.

The SitePoint forums have many members that are more than willing to help you get “savvy”.
If you are looking for someone to write your code for you, i.e. so you can “obtain” it - please post in the MarketPlace.

I am not savvy in javascript which is why I posted the question.

However, I have gotten everything done already without the script as you can see here:

ht tp://sndkids-com.ds5007.gre ybea rdhosting.com/ (remove 3 spaces).

Just hover over the Shopping Cart / Items / Subtotal area and it will popup.

I just need it to stick and then close just like the site I mentioned in my initial post. I thought that maybe some kind of inline script would work but I haven’t had any success in obtaining such code.