Displaying input text field in alert - jquery ui

Question

I am working with jquery ui alert dialog. I have modified the dialog to have an input field to allow text to be entered. Following the manual I placed the input inside div id="dialog-form". I only want to see the input field, when the user clicks the button and the alert shows with it. The problem is that it display on initial start page load : How can I only show the input field on the button click event? JSFIDDLE

Jquery

$('button').click(
        function() {
            console.log($(this));
            var divElem = $(this);
            dialog = $( "#dialog-form" ).dialog({
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Save": function() {
                        divElem.find('.text').text($( "#dialog-form input" ).val());
                        dialog.dialog( "close" );
                    },
                    Cancel: function() {
                        dialog.dialog( "close" );
                    }
                }
            });

        }
    );

HTML

<button>Click Me!</button>

<div id="dialog-form">
    <label>Text:</label><input type="text" />
</div>

Answer 1

use this code in first line in css

#dialog-form {
    display:none;
}

not showing in loading page

Answer 2

Try this.

#dialog-form {
    display:none;
}

Demo:

http://jsfiddle.net/7buayqa0/