[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

jquery dialog

Posted on 2009-05-20
2
Medium Priority
?
1,500 Views
Last Modified: 2012-05-07
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
Comment
Question by:Panos
[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
2 Comments
 
LVL 16

Accepted Solution

by:
anoyes earned 2000 total points
ID: 24435885
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
 
LVL 2

Author Closing Comment

by:Panos
ID: 31583423
Hi anoyes
Thank you for your help
regards
panos
0

Featured Post

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!

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)
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…

649 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