Problem with dialog Close button (solution)s

by photo_tom

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"></script>
<div id="editDisplay" class="editor-container ui-dialog-content ui-widget-content" style="min-height: 0px; width: auto; height: auto; ">
    <form action="/" method="post"><div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div><input data-val="true" data-val-number="The field id must be a number." data-val-required="The id field is required." id="id" name="id" type="hidden" value="123" data-bind="value: myModel.editData().id">    <table>
        <tbody><tr class="editor-row">
            <td class="editor-label">
                <label for="FirstName">First Name</label>
            </td>
            <td class="editor-field"><div class="requiredIcon"><input class="text-box single-line valid" data-val="true" data-val-length="The field First Name must be a string with a maximum length of 20." data-val-length-max="20" data-val-required="The First Name field is required." id="FirstName" name="FirstName" type="text" value="" data-bind="value: myModel.editData().FirstName" maxlength="20"></div><span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span></td>
        </tr>
        <tr class="editor-row">
            <td class="editor-label">
                <label for="LastName">Last Name</label>
            </td>
            <td class="editor-field"><div class="requiredIcon"><textarea cols="30" data-val="true" data-val-length="The field Lasty Name must be a string with a maximum length of 256." data-val-length-max="256" data-val-required="The Lasty Name field is required." id="LastName" name="LastName" placeholder="This is almost really important" rows="2" data-bind="value: myModel.editData().LastName" maxlength="256" class="valid"></textarea></div><span...

CSS

input[type="text"], input[type="password"] {
  border: 2px solid #ccc;
  font-size: 100%;
  color: #444;
  width: 10em;
  padding: 2px;
  border-radius: 4px;
  -moz-border-radius: 4px 4px 4px 4px;
}
table {
  border: solid 1px white;
  border-collapse: collapse;
}
table td {
  padding: 2px;
  font-size: 100%;
  border: solid 1px white;
  vertical-align: text-top;
}
table th {
  padding: 3px;
  text-align: left;
  background: linear-gradient(#5b3905, #a76500);
  /*future CSS3 browsers*/

  background: -moz-linear-gradient(#5b3905, #a76500);
  /*gecko*/

  background: -webkit-gradient(linear, center bottom, center top, from(#a76500), to(#5b3905));
  /*webkit*/

  background: -ms-linear-gradient(#5b3905, #a76500);

  font-size: 110%;
  font-weight: bold;
  color: White;
  text-align: center;
  vertical-align: middle;
}
.editor-container {
  display: table;
  width: 100%;
  border: thin solid #444444;
}
.requiredIcon {
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  white-space: nowrap;
}
.editor-row {
  width: 100%;
}
.editor-row td {
  vertical-align: middle;
}
.editor-label {
  padding-left: .4em;
  width: 40%;
}
.editor-label, .editor-field {
  padding-right: .4em;
  padding-bottom: .2em;
  padding-top: .2em;
}
.editor-field {
  width: 60%;
}
*:focus {
  outline: none;
}
/* issue with chrome doing outline on it's own*/
.curFocus {
  border: 2px solid #05365b;
  background-color: #d3e5f2;
  margin: 3px;
  padding: 3px;
  /*     .gradientbackgroundNoIe(#a0d6ff, #d3e5f2);
   .radiusCornersNoIE;  if in a table cell, then no rounding will occur */

}
.curFocus span {
  display: inherit;
}
.remaingCharacters {
  display: none;
}
.remaingCharacters input {
  width: 3em;
  border: 0px solid black;
}

JavaScript

$(document).ready(function ()
{
    var __SHIFT_KEY_DOWN = false;
    var __TAB_KEY_DOWN = false;

    $(document).keydown(function (e)
    {
        if (e.which == 16)
        {
            __SHIFT_KEY_DOWN = true;
        }
        if (e.which == 9)
        {
            __TAB_KEY_DOWN = true;
        }
    });

    $(document).keyup(function (e)
    {
        if (e.which == 16)
        {
            __SHIFT_KEY_DOWN = false;
        }
        if (e.which == 9)
        {
            __TAB_KEY_DOWN = false;
        }
    });
    var dcfFrom = {

        // function that updates the remaining character count field
        // it assumes that the field to display the remaining characters in is named
        //  <source field id> + 'charCounter'
        updateRemainingCharCnt: function (jqueryThis)
        {
            //get the limit from maxlength attribute  
            var maxlength = parseInt($(jqueryThis).attr('maxlength'));
            //get the current text inside the textarea  
            var text = $(jqueryThis).val();
            //count the number of characters in the text  
            var chars = text.length;
            var fieldId = '#' + $(jqueryThis).attr("id") + 'charCounter';
            var remainingCharCnt = $(jqueryThis).parents('.editor-field').find(fieldId);
            remainingCharCnt.val(maxlength - chars);
        },
        formInintialize: function (formName, viewModelBaseName, parentRowClass)
        {
            if (undefined === formName)
            {
                return;
            }
            if (undefined === parentRowClass) parentRowClass = '.editor-row';

            var formEditRows = $(formName + ' ' + parentRowClass);

            var formInputs = $(formName + ' input, textarea');
            formInputs.each(function ()
            {
                if ($(this).attr("data-nobind")) return;
                $(this).attr('data-bind', 'value: myModel.editData().' + $(this).attr('name'));
            });


           ...