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

jquery dialog

Hello experts.
I have downloaded from http://www.jqueryui.com/demos/dialog/ the files for the dialog tutorial.
There are two div's with the same id =dialog
The second appears on page load and has the backround effect without the  OK button and the first appears when i click on the button and has the Ok button but not the background effect.
I want to change the code so that when the page loads nothing appears and on click must appear the div with the ok button and with the background effect.
Any help?
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="jquery.bgiframe.js"></script>
		<script type="text/javascript">
			$(function(){
              // Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					width: 300,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}
					}
					
					
				});
				 
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});
 
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
		</script>
        <script type="text/javascript">
	$(function() {
		$("#dialog").dialog({
			bgiframe: true,
			height: 140,
			modal: true
		});
	});
	</script>
		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>
 
<div id="dialog" title="Basic modal dialog">
Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
 
 
 
<!-- End demo -->
<!-- End demo-description -->
	
	</head>
	<body>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">Open Calculator</a></p>
		
		
		
		
 
		
		<!-- ui-dialog -->
		<div id="dialog" title="Dialog Title">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><!-- Slider -->
</p>
</div>
 
 
	<form>
		<input value="text input" /><br />
		<input type="checkbox" />checkbox<br />
		<input type="radio" />radio<br />
		<select>
			<option>select</option>
		</select><br /><br />
		<textarea>textarea</textarea><br />
	</form>
 
 
	</body>
</html>

Open in new window

0
Panos
Asked:
Panos
1 Solution
 
anoyesCommented:
First of all, you should never have more than one element on the same page with the same ID.  You should be using something like dialog1 and dialog2 or something like that.  Having multiple elements with the same ID is going to cause all kinds of problems for you, especially when you're using jQuery to get elements by ID.

You can add the background effect (modal overlay) to the one that opens on link click by adding modal: true to it.  See below:

$('#dialog').dialog({
  autoOpen: false,
  modal: true,
  width: 300,
  buttons: {
    "Ok": function() { 
      $(this).dialog("close"); 
    }
  }
});

Open in new window

0
 
PanosAuthor Commented:
Hi anoyes
Thank you for your help
regards
panos
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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