27

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.

7
  • No error? No weird visual actions? Nothing ?
    – Zuul
    Jun 3, 2012 at 0:54
  • If you're interested, I have a plugin for making jQuery dialogs easier: mostthingsweb.com/2011/12/dialogwrapper-2-1-released Jun 3, 2012 at 0:54
  • ah sorry, basically, the error is that the popup isn't showing up at all. And thanks for the link, I'll check that out now.
    – rj2700
    Jun 3, 2012 at 0:55
  • How about a demo on jsfiddle.net? The answers below should be working so there is something going on that you're not telling us about. Jun 3, 2012 at 1:13
  • 3
    I know this is a bit old, but your code doesn't reference the jQuery UI js and css files. Also, you are missing the navBar element that your code references to create the menu. Dec 12, 2013 at 13:08

6 Answers 6

51

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;
  });
});
1
  • Thanks, this helps, however, the dialog still doesn't show up for me. I'll try looking around more.
    – rj2700
    Jun 3, 2012 at 1:05
8

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.

1
  • Thanks. I tried it without passing the open, but still does not work for me. Also, I didn't post the ready event, but it's present in the document.
    – rj2700
    Jun 3, 2012 at 1:04
7

Use below Code, It worked for me.

<script type="text/javascript">
     $(document).ready(function () {
            $('#dialog').dialog({
                autoOpen: false,
                title: 'Basic Dialog'
            });
            $('#contactUs').click(function () {
                $('#dialog').dialog('open');
            });
        });
</script>
5

It's quite simple, first HTML must be added:

<div id="dialog"></div>

Then, it must be initialized:

<script type="text/javascript">
  jQuery( document ).ready( function() {
    jQuery( '#dialog' ).dialog( { 'autoOpen': false } );
  });
</script>

After this you can show it by code:

jQuery( '#dialog' ).dialog( 'open' );
3

You can use the following script. It worked for me

The modal itself consists of a main modal container, a header, a body, and a footer. The footer contains the actions, which in this case is the OK button, the header holds the title and the close button, and the body contains the modal content.

 $(function () {
        modalPosition();
        $(window).resize(function () {
            modalPosition();
        });
        $('.openModal').click(function (e) {
            $('.modal, .modal-backdrop').fadeIn('fast');
            e.preventDefault();
        });
        $('.close-modal').click(function (e) {
            $('.modal, .modal-backdrop').fadeOut('fast');
        });
    });
    function modalPosition() {
        var width = $('.modal').width();
        var pageWidth = $(window).width();
        var x = (pageWidth / 2) - (width / 2);
        $('.modal').css({ left: x + "px" });
    }

Refer:- Modal popup using jquery in asp.net

0

You can check this link: http://jqueryui.com/dialog/

This code should work fine

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.