jQuery dialog popup

rj2700 picture rj2700 · Jun 3, 2012 · Viewed 258.3k times · Source

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:

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

Answer

Andy Jones picture Andy Jones · Jun 3, 2012

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