jquery dialog

Posted on 2009-05-20
Last Modified: 2012-05-07
Hello experts.
I have downloaded from 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>



		<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">


              // Dialog			


					autoOpen: false,

					width: 300,

					buttons: {

						"Ok": function() { 








				// Dialog Link



					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 type="text/javascript">

	$(function() {


			bgiframe: true,

			height: 140,

			modal: true




		<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;}


<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>


<!-- End demo -->

<!-- End demo-description -->




<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 -->




		<input value="text input" /><br />

		<input type="checkbox" />checkbox<br />

		<input type="radio" />radio<br />



		</select><br /><br />

		<textarea>textarea</textarea><br />




Open in new window

Question by:Panos
LVL 16

Accepted Solution

anoyes earned 500 total points
Comment Utility
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:


  autoOpen: false,

  modal: true,

  width: 300,

  buttons: {

    "Ok": function() { 





Open in new window


Author Closing Comment

Comment Utility
Hi anoyes
Thank you for your help

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now