AJAX

Request: Javascript for getting always on top popup window.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2008

Posts: 20

Reputation: Narayan15 is an unknown quantity at this point

Solved Threads: 0

Narayan15

Offline

Newbie Poster

Request: Javascript for getting always on top popup window.

Feb 19th, 2009

hi,
I want to build a popup window that should not be minimized and maxmized. that should be always on top. when other window is opened then the pop up window should not be minimized.

Please help meeeeee

thanks in advance

•

Join Date: Jul 2008

Posts: 149

Reputation: mschroeder is on a distinguished road

Solved Threads: 25

mschroeder mschroeder is offline

Offline

Junior Poster

Re: Request: Javascript for getting always on top popup window.

Feb 19th, 2009

I believe you're talking about a "popup" that is more of a modal window then a true popup. This would mean creating a div that is positioned above the page and floats over everything else.

Here's a quick example of how you could do this with jQuery and CSS.
The fixed positioning is solved thanks to an example by stu nicholls at CSS Play. This should leave the div fixed so that it doesnt scroll with the page even on IE 6. IT fades in when the page loads and it fades out when its clicked.

Please don't hesitate to ask any questions if it doesn't make sense.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        //Make the notice DIV display on page load
	$('#notice').fadeIn(1500);
        //Register a click event on the DIV[id=notice] and make it fade out.
	$('#notice').click( function() {
		$(this).fadeOut(1500);
	});
});
</script>
<style>
 
#notice {display:block; top:200px; left:200px; height:110px; width:276px; position:fixed; border:2px solid black; padding:10px; z-index:1000; background-color:white; display:none;}
* html #notice {position:absolute;}
 
</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->
</head>
<body>
<div id="notice">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</div>
 
<!-- write out 10 paragraphs to keep code short -->
<!-- there is no other reason to do it this way -->
<script type="text/javascript">
	for( i=0; i<10; i++)
	{
		document.write('<p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida  lorem ac mi. Morbi non risus vel mi convallis iaculis. Integer ac elit  id mi venenatis fringilla. Aliquam aliquet varius nisi. Proin  pellentesque risus ac turpis. Nam vestibulum semper mauris. Nullam  fermentum, felis sed sagittis volutpat, purus nisl aliquet enim, sit  amet blandit mauris lectus eget nisl. Nullam purus erat, consectetur  vitae, auctor eget, euismod sed, elit. Vivamus nec tortor a mauris  suscipit viverra. Nam malesuada. Ut porta mattis felis. Aenean sed  felis. Suspendisse viverra varius arcu. Nunc felis. Donec eget sem in  eros rutrum commodo. Vivamus sagittis. Aliquam erat volutpat. </p> ');
	}
</script> 
 
</body> 
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        //Make the notice DIV display on page load
	$('#notice').fadeIn(1500);
        //Register a click event on the DIV[id=notice] and make it fade out.
	$('#notice').click( function() {
		$(this).fadeOut(1500);
	});
});
</script>
<style>

#notice {display:block; top:200px; left:200px; height:110px; width:276px; position:fixed; border:2px solid black; padding:10px; z-index:1000; background-color:white; display:none;}
* html #notice {position:absolute;}

</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->
</head>
<body>
<div id="notice">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</div>

<!-- write out 10 paragraphs to keep code short -->
<!-- there is no other reason to do it this way -->
<script type="text/javascript">
	for( i=0; i<10; i++)
	{
		document.write('<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida  lorem ac mi. Morbi non risus vel mi convallis iaculis. Integer ac elit  id mi venenatis fringilla. Aliquam aliquet varius nisi. Proin  pellentesque risus ac turpis. Nam vestibulum semper mauris. Nullam  fermentum, felis sed sagittis volutpat, purus nisl aliquet enim, sit  amet blandit mauris lectus eget nisl. Nullam purus erat, consectetur  vitae, auctor eget, euismod sed, elit. Vivamus nec tortor a mauris  suscipit viverra. Nam malesuada. Ut porta mattis felis. Aenean sed  felis. Suspendisse viverra varius arcu. Nunc felis. Donec eget sem in  eros rutrum commodo. Vivamus sagittis. Aliquam erat volutpat. </p>');
	}
</script>

</body>
</html>

If you're question/problem is solved don't forget to mark the thread as Solved!

-- Code I post is usually but not always tested. If it is tested it will be against 5.2.12 or 5.3.1