Member Avatar for Narayan15

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

  • 2 Contributors
  • 1 Reply
  • 507 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by mschroeder
Member Avatar for mschroeder

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.

<!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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.