jQuery dialog popup

0 votes

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

Jun 23, 2022 in Web Development by gaurav
• 23,260 points
1,134 views

1 answer to this question.

0 votes

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;
  });
});
answered Jun 28, 2022 by rajatha
• 7,680 points

Related Questions In Web Development

0 votes
0 answers

jQuery Facebox plugin: Focus the popup appearance

I have an HTML page with facebox ...READ MORE

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
340 views
0 votes
0 answers

JavaScript or jQuery "Are you sure?" dialog for <A> link?

I have a link in my HTML: <a ...READ MORE

Jul 26, 2022 in Web Development by gaurav
• 23,260 points
402 views
0 votes
0 answers

How Can I create A 5 second Countdown timer with jquery that ends with a login popup?

How would i create a jquery timer ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
604 views
0 votes
0 answers

jQuery dialog box opne .php file

It's a simple JQ, when I click ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
506 views
0 votes
0 answers

jQuery ui dialog add a help icon in the titlebar

I'd like to add a help icon ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
720 views
0 votes
1 answer

TypeError: $(...).autocomplete is not a function

You would definitely have missed the Jquery ...READ MORE

answered Feb 23, 2022 in JQuery by Aditya
• 7,680 points
9,583 views
0 votes
0 answers

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from ...READ MORE

Jun 23, 2022 in Web Development by gaurav
• 23,260 points
1,021 views
0 votes
1 answer

Date range picker on jquery ui datepicker

Thanks I need this kind of code. ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
4,927 views
0 votes
1 answer

jQuery UI dialog without a title bar but keep the close button

Use this to remove the titelbar of ...READ MORE

answered Aug 4, 2022 in Web Development by rajatha
• 7,680 points
1,526 views
0 votes
1 answer

How can I create a simple page vertical scroll bar without using jQuery?

Surprisingly, there is not a great, simple ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
538 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP