Why is my attempt to use a jQuery UI Dialog failing (not initially hidden, remains glued to the bottom of the page)?

Why is my attempt to use a jQuery UI Dialog failing (not initially hidden, remains glued to the bottom of the page)?

Using the idea here as a "proof-of-concept" before replacing the html with my own, I added that html to my Index.cshtml file (ASP.NET MVC app):

  1. <div id="dialog-message" title="Important information">
        <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
        <div style="margin-left: 23px;">
            <p>
                We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
                <br /><br />
                Our hotel will reopen at 11th of January 2011.<br /><br />
                Another line which demonstrates the auto height adjustment of the dialog component.
            </p>
        </div>
    </div>
...and this jQuery in the Scripts section of that file to open that div (the previous plain-vanilla alert is shown commented out):

  1.     $("#btnAddlEmail").click(function () {
                            //var email = prompt('Please enter the email address', ' name@provider.com');
                            //if (null != email) //&& (email != " name@provider.com")
                            //{
                            //    alert(email);
                            //}
                            $("#dialog-message").dialog({
                                modal: true,
                                draggable: false,
                                resizable: false,
                                position: ['center', 'top'],
                                show: 'blind',
                                hide: 'blind',
                                width: 400,
                                dialogClass: 'ui-dialog-osx',
                                buttons: {
                                    "I've read and understand this": function () {
                                        $(this).dialog("close");
                                    }
                                }
                            });
                        }); // $("#btnAddlEmail").click(function ()

BTW, the button whose click is being handled is:

  1. <div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-11">
            <button class="btn pseudobtn darkgreentext" id="btnAddlEmail">+ Add Another Email</button>
        </div>
    </div>

However, there are two problems:

First, the "dialog" html I've added is not hidden - it displays at the bottom of the page. How can I hide it until the button is clicked?

Second, when I click #btnAddlEmail, it doesn't open a dialog next to the button, which is what I would hope, but simply "focuses" that div by paging down to it. How can I get that div to act like a dialog?

Note: I have done (presumably, anyway) what is necessary to make jQuery UI work in my project, following the steps here as discussed here.

Here is a scream shot of what it looks like ("+ Add Another Email" is what I click to show the dialog, which is laying lazily at the bottom):