Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2011-09-19
11
Medium Priority
?
483 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

783 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