Home/ Questions/Q 6534939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:18:42+00:00

I want to use the jQuery UI plugin http://learn.jquery.com/jquery-ui/getting-started/ so I’ve got everything I

  • 0

I want to use the jQuery UI plugin http://learn.jquery.com/jquery-ui/getting-started/ so I’ve got everything I need downloaded. I’ve put the files where they need to be and included them in the <head> like I’m supposed to – all no problems there. But next I get a little stuck due to my utter noobieness.

It says:

Once you’ve included the necessary files, you can add some jQuery widgets to your page. For example, to make a datepicker widget, you’ll add a text input element to your page and then call .datepicker(); on it. Like this: HTML: <input type="text" name="date" id="date" />

JS:

$('#date').datepicker();

I want to use the dialog modal window popup with a form in it they’ve got as a demo. http://jqueryui.com/demos/dialog/#modal-form. The form will popup when someone clicks an image.

As far as I can make out (I’m a beginner with JavaScript) I need to make a hidden div on my page which contains the form. I need to attach it somehow to JavaScript then need to call it when the user clicks the image.

I have no idea if that’s right or wrong. And if it’s right I dunno how to do it. Anyone fancy speeding me along with some directions 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you want something like this: http://jsfiddle.net/expertCode/gTPnz/

    HTML:

    <div>
    <img alt="exampleImage" src="http://www.cancercareofwnc.com/Images/topmenu_testing_0.gif">

    <div id="myDiv">
        <form id="myForm">
            <input type="text" name="date" id="date" />
            <input type="text" name="other" id="other" />
        </form>
    </div>
</div>

    CSS:

    div#myDiv{
    visibility:hidden;
}

    JavaScript:

    $(document).ready(function(){
    $('img[alt="exampleImage"]').click(function(){
        $('#myForm').dialog();
    });                          
});
    • 0