Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Closing window when focus is lost

Status
Not open for further replies.
GooDog

GooDog

Programmer
Feb 11, 2002
34
IN
Hi all,
In my project i want to close the popup window when the focus of that window is lost.If i put the self.close() in the body onblur event i am not able to focus the other fields in that window.My aim is to close the popup window if the user make the focus in the main window.Can any body give any suggestions.Thanks in advance.

Regards,
Prakash
 
Sort by date Sort by votes
You could use showModalDialog() to prevent them from focusing on the main window until they close the popup. Only works in IE though, I think.

Adam

Pedro offers you his protection
 
Upvote 0 Downvote
Let me confirm if I understand what you want. You have a webpage; let's call it "page1". Page1 opens a popup. Whenever focus is lost in the popup, you want the popup to close? Is this correct?

If this is the case, then the code you mention does exactly this.

Or, do you need something different, like the following:
Page1 opens a popup. Whenever focus is lost from page1 (not the popup), then, you want the popup to close? Is this correct?

If neither of these examples is what you want, or if the code still does not work, can you provide an online example and tell what you would like to happen?
 
Upvote 0 Downvote
Ok... I was testing it in Firefox. This does seem odd that it would close when you focus on the textfield, since the textfield, I would think would be a part of the body.

I have come up with a somewhat acceptable solution; howevering, I am currentlytrying to figure out one last thing so it will work in Firefox....
 
Upvote 0 Downvote
If the above solution does not work, here's an alternative. It is not a perfect solution for IE, but it works in many cases.

Step 1, make your pop-up a fixed width and add two variables to hold the value of the both the width and height of the pop-up as shown below:
Code: 
<script>
	//Credits to: [URL unfurl="true"]http://www.google.com/search?q=width+of+a+window+javascript&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official[/URL]
	// For Internet Explorer, we must open a window with a specific width and height.  We must also make sure that it cannot be resized.
	var winWidth = 300;
	var winHeight = 200;
	//Credits to: [URL unfurl="true"]http://www.pageresource.com/jscript/jwinopen.htm[/URL]
	window.open('popup.html','fixedSize','width='+winWidth+',height='+winHeight+',resizable=no');
</script>

Step 2

Create your actual pop-up script by adding the following <script> tag, and the onblur trigger to the body tag, like so:
Code: 
<html>
<script>

function closeWin() {
//Credits to: [URL unfurl="true"]http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf[/URL]
//Credits to: [URL unfurl="true"]http://forums.mozillazine.org/viewtopic.php?p=1336429#1336429[/URL]
//Credits to: [URL unfurl="true"]http://64.233.161.104/search?q=cache:Ue3N0kJQmEQJ:www.devscripts.com/scripts/4731/visit/+indexof+firefox+javascript&hl=en&client=firefox-a[/URL]
	if(navigator.userAgent.indexOf("MSIE") == -1) {
		window.self.close();
	} else { //Credits to: [URL unfurl="true"]http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_event.asp[/URL]
		var mouseX = event.screenX;
		var mouseY = event.screenY;
		var relMouseX = event.clientX;
		var relMouseY = event.clientY;
		
		//Credits to: [URL unfurl="true"]http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_window.asp[/URL]
		var canvasTop = window.self.screenTop;
		var canvasLeft = window.self.screenLeft;
		//----
		
		var winWidth = window.opener.winWidth;
		var winHeight = window.opener.winHeight;

		//-4  // +7		//y: -23  //+7

		if(relMouseX<=-4 || relMouseX>=winWidth+7 || relMouseY<=-4 || relMouseY>=winHeight+7) {
			window.self.close();
		}
	}
}
</script>



<body onblur="closeWin()">
this is the popup
<input type="text"></input>
</body>
</html>
 
Upvote 0 Downvote
Thank you guys for your responses.I have made as KevinAr18's idea.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
420
gmmastros
gmmastros
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
741
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
788
JScannell
JScannell
bs6600
  • Locked
  • Question
How can I make a window wider?
Replies
1
Views
259
xwb
xwb
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
569
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top