title: IE7, JQuery UI Dialog
body: <p>I'm using JQuery UI Dialog. In this form, I validate something.I call this function;</p>
  
  <pre><code>MessageBox('this is message', 'Error', OpenDialog());
  </code></pre>
  
  <p>In Chrome, Firefox,IE8,IE9; It works correctly but in IE7, only dialog's header shows like this. When I click 'Okey' button, It only shows header
  <img src="https://i.stack.imgur.com/oLurr.png" alt="enter image description here">
  How to solve this?</p>
  
  <p>MessageBox function </p>
  
  <pre><code>function MessageBox(text, title,Func) {
  
  var dv = document.createElement('div');
  
  $(function () {
  
      dv.id = 'Dialog';
      dv.innerHTML = '&lt;table style="font-family:Calibri;"&gt;&lt;tr&gt;&lt;td&gt;' + text + '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';       
      document.forms[0].appendChild(dv);
      var dlg = $('#Dialog').dialog({
          autoOpen: false,
          width: 400,
          title: title,
          modal: true,
          resizable: false,
  
          buttons: [
          {
              text: "Okey",
              width: 80,
              click: function () {
                  DialogClose_('Dialog');
  
              }
          }],
          open: function () {
              $('.ui-dialog-buttonpane').find('button:contains("Okey")').addClass('ButtonDefault');
          },
  
          close: Func,
          beforeClose: function () {
              var dv2 = document.getElementById("Dialog");
              dv2.parentNode.removeChild(dv2);
          }
      });
      dlg.parent().appendTo(jQuery('form:first'));
      $('#Dialog').dialog("option", "minWidth", 400);
      $('#Dialog').dialog('option', 'position', 'center');
      $('#Dialog').dialog('open');
  });
  return;
  </code></pre>
  
  <p>}</p>
  
  <p>OpenDialog function like this;</p>
  
  <pre><code> function OpenDialog() {
          $(document).ready(function () {
              $("#dialog").dialog("open");
          });
      }
  </code></pre>