title: Why JQuery Modal Dialog and JQGrid Modal Dialog are looking different?
body: <p>I have created JQGrid with Jquery modal dialog for Delete. Jqgrid with inline editing and one field is required if i leave it blank and the press submit the it will popup message Please enter First Name but the problem is Inbuilt Popup message and my jquery modal dialog are looking too different.<br/> </p>
  
  <p><strong>Inbuilt JQGrid Modal Dialog:</strong><br/>
  <img src="https://i.stack.imgur.com/3CEhC.png" alt="enter image description here"><br/></p>
  
  <p><strong>JQuery Modal Dialog</strong><br/>
  <img src="https://i.stack.imgur.com/FNVyy.png" alt="enter image description here">
  <br/></p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>function createGrid() {
          jQuery("#list").jqGrid({
              url: '@Url.Action("JQGridGetGridData", "TabMaster")',
              datatype: 'json',
              mtype: 'GET',
              colNames: ['col ID', 'First Name', 'Last Name', ''],
              colModel: [{ name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                        { name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true, editrules: { required: true} },
                        { name: 'LastName', index: 'LastName', width: 150, align: 'left', editable: true, editrules: { required: true} },
                        { name: 'act', index: 'act', width: 60, sortable: false}],
              pager: jQuery('#pager'),
              hidegrid: false,
              rowNum: 100,
              rowList: [10, 50, 100, 150],
              sortname: 'colID',
              sortorder: "asc",
              viewrecords: true,
              multiselect: false,
              width: 500,
              height: "250px",
              imgpath: '@Url.Content("~/Scripts/themes/steel/images")',
              caption: 'Tab Master Information',
              editurl: '@Url.Action("JQGridEdit", "TabMaster")',
              gridComplete: function () {
                  var ids = jQuery("#list").getDataIDs();
                  for (var i = 0; i &lt; ids.length; i++) {
                      var id = ids[i];
                      be = "&lt;a href='#'&gt;&lt;div title='Edit' id='action_edit_" + id + "' class='actionEdit' onclick='inlineEdit(" + id + ");'&gt;&lt;/div&gt;&lt;/a&gt;";
                      de = "&lt;a href='#'&gt;&lt;div title='Delete' id='action_delete_" + id + "' class='actionDelete' onclick='inlineDelete(" + id + ");'&gt;&lt;/div&gt;&lt;/a&gt;";
                      se = "&lt;a href='#'&gt;&lt;div title='Save' style='display:none' id='action_save_" + id + "' class='actionSave' onclick='inlineSave(" + id + ");'&gt;&lt;/div&gt;&lt;/a&gt;";
                      ce = "&lt;a href='#'&gt;&lt;div title='Cancel' style='display:none' id='action_cancel_" + id + "' class='actionCancel' onclick='inlineCancel(" + id + ");'&gt;&lt;/div&gt;&lt;/a&gt;";
                      jQuery("#list").setRowData(ids[i], { act: be + de + se + ce })
                  }
              }
          }).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: false });
      }
  </code></pre>
  
  <p><strong>How can i apply Jquery Modal Dialog for JQGrid inbuilt dialog skin?</strong></p>
  
  <p>Thanks,
  Imdadhusen</p>