How has Daniweb made it's pop-up?

[pwgmac]

Hi all,

Sorry if this is a common thread. I did a search but couldn't find a solution I was looking for...

You know the popup that appears if you're not logged in about joining Daniweb, I need to put together one very similar for a forum I'm working on. All the functionality I want is an ajax popup showing our latest offer, with a close button, and the ability to set a cookie that expires in a month so it doesn't annoy our users and pop up each time they load a different page.

I figured I would use the jQuery library to display the popup when the page loads, whilst using Klaus Hartl's cookie plugin here:

http://plugins.jquery.com/files/jquery.cookie.js.txt

The problem is I'm a novice to javascript and have no idea how to integrate the two together. Would anyone happen to know where to start?

I know what I want to do, just not how to...

$(document).ready(function() {
   // Check if cookie exists
   // If exists, do nothing
   // If it doesn't exist then invoke div later in HTML as modal AJAX popup
   // Set cookie to expire in a month
 });

Many thanks in advance for all your help

Paul

[george61]

Ok this is the HTML code about the divs where mask is the div which is blackening the screen:

<div id="boxes">

<!-- Start of Login Dialog -->  
<div id="dialog1" class="window"> 
  <div class="d-header"> 
    <input type="text" value="username" onclick="this.value=''"/><br/> 
    <input type="password" value="Password" onclick="this.value=''"/>    
  </div> 
  <div class="d-blank"></div> 
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div> 
</div> 
<!-- End of Login Dialog -->
<div id="mask"></div>
</div>

This is the text link trigerring the event:

<p class="lg"><a href="#dialog1" name="modal"><b>Log in</b></a></p>

This is the CSS code

<style type="text/css">
  #mask {
  position:absolute;
  left:0;
  top:0;
  z-index:200;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:220;
  padding:20px;
}

#boxes #dialog1 {
  width:375px;
  height:203px;
}

#dialog1 .d-header {
  background:url(images/formlog2.png) no-repeat 0 0 transparent; 
  width:400px; 
  height:220px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
  margin-top: -13%;
}
</style>

And this is the script

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

</script>

And finally you'll have to make some PNG or JPG images(if you want) with apropriate size to have the popup looking good. You'll see this images in the CSS and HTML code.