dialog not working

dialog not working

  1.         $('#complete_dialog').dialog({
  2.             height: 140,
  3.             modal: true,
  4.             resizable: false,
  5.             buttons: {
  6.                 'Mark Complete' : function() {
  7.                     $('input#mark_complete').val('on');
  8.                     $('input#mark_complete').attr('checked', true)
  9.                     $(this).dialog('close');
  10.         return true;
  11.                 },
  12.                 Cancel : function() {
  13.                     $('input#mark_complete').val('off');
  14.                     $('input#mark_complete').attr('checked', false);
  15.                     return false;
  16.                     $(this).dialog('close');
  17.                 }
  18.             }
  19.         });
  20.         $('#mark_complete').click(function() {
  21.             $('#complete_dialog').dialog('open');
  22.         });
  23. <div id="dialog_complete" title="ML Complete Warning">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Once you have marked this ML complete, you will be unable to change materials within. You will be required to create a supplement to add materials.<br />Please confirm the Ship To address before continuing. Are you sure you want to mark this complete?</p>
    </div>




Why does the <div> with the dialog info appear on the top of the page instead of waiting for the dialog box to be opened? And the click bind does not open it.