In your CSS file, add a rule that makes anything with a class of dialog not be displayed.

Create a JS file of your own and include a <script> reference to it in the HTML file.

Add a <div> with a class of dialog. Put some text inside it.

Add a <button> element with some text in it.

Add behavior that makes clicking the button cause a the <div> to appear. jQuery functions you should use:

$

.on

.dialog

Since these are <button> elements and not <input type="submit"> or <a href="#"></a>, you don't need to e.preventDefault() at the end of your event listener, as buttons do nothing by default.

Extra credit:

Add a <button> inside the <div>, with the text "Close".

Add behavior that makes clicking that <button> close the dialog (in addition to the generated close button which already does this). You'll need to learn how to use "methods" on the Dialog widget - and you'll need to make sure this event listener is only applied to the button inside the dialog.

Customize jQuery UI further to include the Menu widget.

Create an unordered list with anchors and sublists (<a> and <ul> elements inside each <li>).

Cause the unordered list to render as a menu.

You might want to restrict the width of the main list to make it render sanely.