Close popup image if detects mouse click

[bebu]

I am a beginner with very basic knowledge of Javascript.

Please help me to modify this script. When somebody clicks on the thumbnail to open up the enlarged popup image ( not an html page).
I have seen somewhere where somebody tries to left click on the popup image or right click to save it, the popup closes by it self.
Self close timer won't for me. I tried watermarking for the images. People wipe the watermark and still use them as if their own. :(

 
<!-- ;
var newwindow = ''
function popitup(url) {
    if (newwindow.location && !newwindow.closed) 
    { newwindow.location.href = url; newwindow.focus(); } 
else 
    { newwindow=window.open(url,'htmlname','width=500,height=600,resizable=1') ; }
}
function tidy()
{
if (newwindow.location && !newwindow.closed) { newwindow.close(); } 
}
// -->
</script>
 
<a href="javascript:popitup('image_to_open_in_popup.jpg')"><img src="image_from_the_html_page.jpg" width="300" height="225" border="0" alt="image_name"></a>

[pbmods]

Heya, bebu. Welcome to TSDN!

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

Try this:

window.onclick = window.close;
 

[bebu]

Thanks for your reply! Where should I add above code?

[pbmods]

Heya, bebu.

Thanks for your reply! Where should I add above code?

You'll want to put that in the code of the pop-up window, preferably in the HEAD element, since that way the User can't click the stop button to bypass your code.

[bebu]

Popup window opens only image. There is no head content or HTML document

[pbmods]

Heya, bebu.

Popup window opens only image. There is no head content or HTML document

Fair enough. In that case, you'll add a slightly different line of code right after you open the window:

newwindow.onclick = newwindow.close;
 

Where newwindow is the variable that references the newly-opened window.

[bebu]

Heya, bebu.



Fair enough. In that case, you'll add a slightly different line of code right after you open the window:

newwindow.onclick = newwindow.close;
 

Where newwindow is the variable that references the newly-opened window.

Where do I insert the above code? I tried, may be I am doing something wrong. I have very little knowledge of Javascript.

Thanks pbmods!

[pbmods]

Heya, bebu.

Ok. So we have here on line 7 of your OP:

newwindow=window.open(url,'htmlname','width=500,he  ight=600,resizable=1')
 

This opens a new window and 'stores' it in the newwindow variable. So far so good.

Now the goal is to set this up so that whenever the User clicks anywhere in that window, the window closes.

To do this, we'll set up an event handler that triggers when the User clicks the mouse in that window, also known as:

newwindow.onclick
 

When the User clicks in the window, we want to close it. Fortunately, there is a function that does exactly that:

newwindow.close()
 

Now the trick is, we don't want to call newwindow.close() UNTIL the User clicks in that window (in other words, we don't want to call it until the onclick event fires for the new window).

So we have to chop off the '()' from the end:

newwindow.onclick = newwindow.close;
 

I wrote an article about why the '()' has to get removed from the end of the function name, but you don't have to worry about that right now. For now, just trust me that you have to do this.

So we now have our statement that will set up newwindow to close whenever the User clicks in it. But where do we put it?

The best place for it is directly after we create the new window:

if (newwindow.location && !newwindow.closed)
{
    newwindow.location.href = url; newwindow.focus();
}
else
{
    newwindow = window.open(url,'htmlname','width=500,height=600,resizable=1') ;
    newwindow.onclick = newwindow.close;
}
 

[bebu]

:

if (newwindow.location && !newwindow.closed)
{
    newwindow.location.href = url; newwindow.focus();
}
else
{
    newwindow = window.open(url,'htmlname','width=500,height=600,resizable=1') ;
    newwindow.onclick = newwindow.close;
}
 

Hi pbmods,

It works in Firefox/2.0.0.5 but not in IE 6.0.2. Why is that?

[pbmods]

Heya, bebu.

Hi pbmods,

It works in Firefox/2.0.0.5 but not in IE 6.0.2. Why is that?

Dunno. I have a Mac.

Does it give you an error?

[bebu]

Heya, bebu.



Dunno. I have a Mac.

Does it give you an error?

It doesn't give me any error. It closes with X but not with right or left click. And works fine in FireFox.

Am I allowed to post a link for the test page?

[pbmods]

Heya, bebu.

Am I allowed to post a link for the test page?

Sure. The rule against external links only applies to spam or commercial links. You are always welcome to post links to test pages and articles that help explain your posts.

[bebu]

Heya, bebu.



Sure. The rule against external links only applies to spam or commercial links. You are always welcome to post links to test pages and articles that help explain your posts.

Thanks pbmods!

Here is link ...
Test page

[pbmods]

Heya, Bebu.

Your page works as expected in Firefox on the Mac. However, it does not work in Safari, which would lead me to expect that this is a Firefox-only feature.

Here's what I would do. Instead of using an image as the URL for the pop-up, use an HTML document instead.

popup_image1.html:

<html>
    .
    .
    .
 
    <body onclick="window.close();">
        <img ... />
        .
        .
        .
    </body>
</html>
 

And then in the original page:

newwindow = window.open('popup_image1.html' ... );
 

[bebu]

Heya, Bebu.

Your page works as expected in Firefox on the Mac. However, it does not work in Safari, which would lead me to expect that this is a Firefox-only feature.

Here's what I would do. Instead of using an image as the URL for the pop-up, use an HTML document instead.

popup_image1.html:

<html>
    .
    .
    .
 
    <body onclick="window.close();">
        <img ... />
        .
        .
        .
    </body>
</html>
 

And then in the original page:

newwindow = window.open('popup_image1.html' ... );
 

I would like to avoid making HTML documents for the images, since I have over 150 images which has popup code.

[pbmods]

Heya, Bebu.

I would like to avoid making HTML documents for the images, since I have over 150 images which has popup code.

Will you be able to execute server-side scripts such as .php or .asp on your server?

[bebu]

Heya, Bebu.



Will you be able to execute server-side scripts such as .php or .asp on your server?

I have no idea. My site is with two hosting companies. I will have to find out that on Monday. I have very limited knowledge of computer scripts or languages. I am an artist and I do maintain my website.

[kovik]

So you know, the window.open() function returns a reference to the 'window' object of the new window, which is the highest element of the DOM. You can alter this object in any way that you want to, including generating the new page dynamically. Of course, I prefer that this kind of thing is done server-side, but it is perfectly valid client-side as well.

Since you are loading only the image, you may think that the image is the only object in the DOM on that page. You'd be incorrect in that assumption, though. The <html> and <body> elements still exist, as well as a single <img> element. Since it seems as though setting an onclick event for the window object isn't cross-browser compatible, set the event to the body element.

function popitup(url)
{
    var newwindow = window.open(url, 'imageWindow', 'width=500,height=600,resizable=1');
 
    newwindow.document.body.onclick = newwindow.close();
}

Try it.

Also, FYI, you don't need the if statement in your popitup() function. The open() function automatically overwrites windows with the same name.

[bebu]

So you know, the window.open() function returns a reference to the 'window' object of the new window, which is the highest element of the DOM. You can alter this object in any way that you want to, including generating the new page dynamically. Of course, I prefer that this kind of thing is done server-side, but it is perfectly valid client-side as well.

Since you are loading only the image, you may think that the image is the only object in the DOM on that page. You'd be incorrect in that assumption, though. The <html> and <body> elements still exist, as well as a single <img> element. Since it seems as though setting an onclick event for the window object isn't cross-browser compatible, set the event to the body element.

function popitup(url)
{
    var newwindow = window.open(url, 'imageWindow', 'width=500,height=600,resizable=1');
 
    newwindow.document.body.onclick = newwindow.close();
}

Try it.

Also, FYI, you don't need the if statement in your popitup() function. The open() function automatically overwrites windows with the same name.

It's not working. When I click the link it opens up the popup. When I click on the pop up it does not close. If I click another link from the parent window, then the popup closes.

[bebu]

<script type="text/javascript">
 
// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use
 
var popbackground="black" //specify backcolor or background image for pop window
var windowtitle="Larger View" //pop window title
 
function detectexist(obj){
return (typeof obj !="undefined")
}
 
function jkpopimage(imgpath, popwidth, popheight, textdescription){
 
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}
 
getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=no,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em" onBlur="self.close()" onClick="self.close()" onContextmenu="return false;"><meta http-equiv="imagetoolbar" content="no"><br>'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}
</script>

The above script works fine as long as you only click links for the popups.
It closes the popup when someone clicks on it.

Only thing is not working with this script is if page A has all the links for the popups. After one popup is open and a person clicks on the link from the Page A which opens the page B and decides to come back to page A and starts clicking on the the popup links. Then the popup won't come in front. If we bring it to front or close the popup then the popup functions stops working. Even after closing the popup new popup doesn't come.

[kovik]

It's not working. When I click the link it opens up the popup. When I click on the pop up it does not close. If I click another link from the parent window, then the popup closes.

Oh well. It was just theory, so I'd never tested it. All of the elements exist, but I guess they don't accept JavaScript. You should really use a document instead of just the image if you want to do what you're after if you can't alter the DOM.