[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 485
  • 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work 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

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

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