Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery dialog popup

I am trying to get this dialog popup form to show up when this link is clicked but it does not work for me. I've been working on this for the past three hours and this is getting too frustrating for me.

Here's my HTML:

<a href="#" id="contactUs">Contact Us</a> <div id="dialog" title="Contact form">   <p>appear now</p> </div> 

And here's my JavaScript, this is in an external file:

$("#contactUs").click(function() {   $("#dialog").dialog("open");   return false; }); 

I've used these links, but to no avail for me:

  • http://jqueryui.com/demos/dialog/#modal
  • http://jqueryui.com/demos/dialog/#default

Please let me know if have an ideas, much appreciated, thanks.

like image 788
rj2700 Avatar asked Jun 03 '12 00:06

rj2700


People also ask

What is the difference between a modal and a dialog?

Dialog (dialogue): A conversation between two people. In a user interface, a dialog is a “conversation” between the system and the user. Mode: A special state of the system in which the same system has somewhat different user interfaces.

What is a JQuery modal window?

JQuery Modal is an overlay dialog box or in other words, a popup window that is made to display on the top or 'overlayed' on the current page. It is a pop up modal box that is converted into the viewport deliberately for the user to interact with before he can return to the actual site.


2 Answers

This HTML is fine:

<a href="#" id="contactUs">Contact Us</a>                    <div id="dialog" title="Contact form">   <p>appear now</p> </div> 

You need to initialize the Dialog (not sure if you are doing this):

$(function() {   // this initializes the dialog (and uses some common options that I do)   $("#dialog").dialog({     autoOpen : false, modal : true, show : "blind", hide : "blind"   });    // next add the onclick handler   $("#contactUs").click(function() {     $("#dialog").dialog("open");     return false;   }); }); 
like image 118
Andy Jones Avatar answered Sep 29 '22 07:09

Andy Jones


Your problem is on the call for the dialog

If you dont initialize the dialog, you don't have to pass "open" for it to show:

$("#dialog").dialog(); 

Also, this code needs to be on a $(document).ready(); function or be below the elements for it to work.

like image 21
Ricardo Souza Avatar answered Sep 29 '22 09:09

Ricardo Souza