• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 488
  • Last Modified:

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

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
ishani_v
Asked:
ishani_v
  • 6
  • 5
1 Solution
 
Gurvinder Pal SinghCommented:
any specific reason why you do not want to use jquery dialog?
http://jqueryui.com/demos/dialog/
0
 
ishani_vAuthor Commented:
@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
 
Gurvinder Pal SinghCommented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
ishani_vAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
<<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
 
ishani_vAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
It appears for me (using my code), please make sure if the jquery library is in right place
0
 
ishani_vAuthor Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
ishani_vAuthor Commented:
@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
 
ishani_vAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now