Solved

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

Posted on 2011-09-19
11
479 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: 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: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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

635 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