Solved

How to create a modal window using <div> tag and Javascript?

Posted on 2011-09-19
11
471 Views
Last Modified: 2012-05-12
Hi,

I need to create a modal window i.e. blur my existing window and open a pop-up window in the center using <div> tag and Javscript. I have managed to get a modal window but it doesn't mask the entire screen. It masks a certain portion of the screen as seen in the screenshot. I would like to mask either the entire screen or the block that is seen in the background. Please find the code and screenshot attached below. Let me know where I am going wrong or if there's something more to add.

Thanks in advance
Javascript Code:

<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>

HTML code:

<td><a class="button" href="#dialog" name="modal"><span style="width:150px; text-align:center;">Get Twitter Stats</span></a></td>
        <div id="boxes">
        <div id="dialog" class="window"> <?php require_once('twitteroauth/final_test.php') ?> 
		<br><a href="#"class="close"/>Close it</a>
		</div>
		<div id="mask"></div>
		 </div>
Style.css
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

Open in new window

Screen-shot-2011-09-19-at-16.50..png
0
Comment
Question by:ishani_v
  • 6
  • 5
11 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36561678
any specific reason why you do not want to use jquery dialog?
http://jqueryui.com/demos/dialog/
0
 

Author Comment

by:ishani_v
ID: 36562900
@gurvinder372,

Thanks for your reply. But the Jquery dialog seen in the example is not exactly what I'm looking for. I need to blur the background n only let the pop up window be in the center. Since I m not good with Jquery, I  was hoping to do this using <div> and Javascript. Any suggestions on how to do it using them ?

Thanks.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36564821
check this simple example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<style>
			html, body, #page, #dialogContainer
			{
				width:100%;
				height:100%;
			}

			#page
			{
				z-index:1;
				position:absolute;
				left:0px;
				top:0px;
			}


			#dialogContainer
			{
				z-index:1;				
				display:none;
				position:absolute;
				left:0px;
				top:0px;
			}

			.alpha60 
			{
				/* Fallback for web browsers that doesn't support RGBa */
				background: rgb(0, 0, 0) transparent;
				/* RGBa with 0.6 opacity */
				background: rgba(0, 0, 0, 0.6);
				/* For IE 5.5 - 7*/
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
				/* For IE 8*/
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
			}
		
			#dialog
			{
				height:200px;
				width:200px;
				left:200px;
				top:200px;
				position:absolute;
				border:1px solid #000;
				background-color:#fff;
			}

		</style>
		<script src="jquery-1.4.2.min.js"></script>
		<script>
			
			function showDialog()
			{
				$("#dialogContainer").show();
			}
			
			function closeDialog()
			{
				$("#dialogContainer").hide();
			}
			
		</script>
	</HEAD>

	<BODY>
		<div id="page">
			<form>
				<br>
				<br>
				<br>
				<br>
				name <input type="text"/>
				<br>
				age <input type="text"/>
				<br>
				salary <input type="text"/>
				<br>
				designation <input type="text"/>
				<br>
				date <input type="text"/>
				<br>
				<input type="button" value="submit" onclick="showDialog()"/>
			</form>
		</div>
		<div id="dialogContainer" class="alpha60">
			<div id="dialog">
				This is a dialog box
				<input type="button" value="close" onclick="closeDialog()"/>
			</div>
		</div>
	</BODY>
</HTML>

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:ishani_v
ID: 36566022
I am sorry but your code doesn't work at all.  I think I just need to play around with values in CSS file so that the mask I have created doesn't go out of the block, as compared to the way it is now covering entire page in an uneven way. Any suggestions on that ?

Thanks.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36566383
<<I am sorry but your code doesn't work at all. >>
Please elaborate on this. What do you mean when you say it doesn't work at all?
0
 

Author Comment

by:ishani_v
ID: 36569636
I mean when I run your code and click on submit button, there appears no modal dialog or popup window on the screen, which I think it should. Correct me if I am wrong.

Thanks.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36571806
It appears for me (using my code), please make sure if the jquery library is in right place
0
 

Author Comment

by:ishani_v
ID: 36572477
How do you check that? I am sorry my doubts might sound silly but since I am really new to JQuery I dont know much about all this. So if you could elaborate about the jquery library being in the right place.. It would be great.

Thanks.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575691
I only mean that please check if the jquery library is actually being loaded or not. It should be in the same folder as the html file
0
 

Accepted Solution

by:
ishani_v earned 0 total points
ID: 36590384
@gurvinder372:Thanks for your help so far.

Well  I think I figured out the solution myself. I was placing the <div id='mask'></div> in the wrong place which is why it wasn't masking the entire screen. I have now placed the mask containing <div> tag in the php file where the top menu containing the different tabs is present. Thus now it does mask the entire screen. Also I have put the css attribute position:fixed for the <div> tag containing the dialog window which places it in the center.

0
 

Author Closing Comment

by:ishani_v
ID: 36715462
While going through the code  again I figured out that its the wrong positioning of the <div> tag containing the mask which is not masking the entire screen. Now that its replaced, the code seems to be working fine. Also I have provided the other changes that I have made for the window to appear in the center.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question