为什么JQuery模态对话框和JQGrid模态对话框看起来不同？

我已经用Jquery模态对话框创建了JQGrid，用于删除。Jqgrid具有内联编辑功能，如果我将其留空并按下“提交”按钮，则需要一个字段。它将弹出消息请输入名字，但问题是内置的弹出消息和我的jquery模式对话框看起来太不一样了。

内置JQGrid模式对话框：

JQuery模式对话框

代码：

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 < ids.length; i++) {
                    var id = ids[i];
                    be = "<a href='#'><div title='Edit' id='action_edit_" + id + "' class='actionEdit' onclick='inlineEdit(" + id + ");'></div></a>";
                    de = "<a href='#'><div title='Delete' id='action_delete_" + id + "' class='actionDelete' onclick='inlineDelete(" + id + ");'></div></a>";
                    se = "<a href='#'><div title='Save' style='display:none' id='action_save_" + id + "' class='actionSave' onclick='inlineSave(" + id + ");'></div></a>";
                    ce = "<a href='#'><div title='Cancel' style='display:none' id='action_cancel_" + id + "' class='actionCancel' onclick='inlineCancel(" + id + ");'></div></a>";
                    jQuery("#list").setRowData(ids[i], { act: be + de + se + ce })
                }
            }
        }).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: false });
    }

函数createGrid（）{ jQuery（“#list”）.jqGrid({ url:'@url.Action（“JQGridGetGridData”，“TabMaster”）， 数据类型：“json”， mtype:'获取'， 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'，宽度：60，可排序：false}]， pager:jQuery（“#pager”）， 希德格里德：错， 行数：100， 行列表：[10,50,100,150]， sortname:“colID”， 分拣员：“asc”， viewrecords：是的， 多选：错， 宽度：500， 高度：“250px”， imgpath:“@Url.Content（“~/Scripts/themes/steel/images”）， 标题：“选项卡主信息”， editurl:'@Url.Action（“JQGridEdit”、“TabMaster”）， gridComplete:函数（）{ var id=jQuery（“#list”）.getDataId（）； 对于（变量i=0；i 如何将Jquery模态对话框应用于JQGrid内置对话框皮肤？

谢谢，

---

Imdadhusen

jqGrid是jQuery插件，而不是jqueryui小部件。所以它不使用jqueryui对话框。而不是它使用的，和方法。在某些情况下，使用简化版本。许多人（包括我在内）希望下一个版本中的jqGrid在内部使用更多的JQueryUI控件，并且可能是一个JQueryUI小部件，但是现在如果您想要以jqGrid样式创建对话框，您应该使用上面列出的方法

作为使用函数的示例，我建议使用方法创建与jqGrid相同的对话框。我在演示中加入了“删除”导航按钮来显示，如果您首先使用创建对话框的“删除选定行”按钮，然后使用“删除”导航按钮，jqGrid将不会创建新对话框。而不是我们的自定义对话框将被使用

相应代码如下：

var grid = $("#list"),
    gID = grid[0].id, //grid[0].p.id,
    IDs = {
        themodal:'delmod'+gID,
        modalhead:'delhd'+gID,
        modalcontent:'delcnt'+gID,
        scrollelm:'DelTbl_'+gID
    },
    hideDialog = function() {
        $.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
    },
    rowId,
    createDeleteDialog = function() {
        var dlgContent =
            "<div id='"+IDs.scrollelm+"' class='formdata' style='width: 100%; overflow: auto; position: relative; height: auto;'>"+
                "<table class='DelTable'>"+
                    "<tbody>"+
                        "<tr id='DelError' style='display: none'>"+
                            "<td class='ui-state-error'></td>"+
                        "</tr>"+
                        "<tr id='DelData' style='display: none'>"+
                            "<td>"+rowId+"</td>"+ // it has not so much sense
                        "</tr>"+
                        "<tr>"+
                            "<td class='delmsg' style='white-space: pre;'>"+$.jgrid.del.msg+"</td>"+
                        "</tr>"+
                        "<tr>"+
                            "<td>&#160;</td>"+
                        "</tr>"+
                    "</tbody>"+
                "</table>"+
            "</div>"+
            "<table cellspacing='0' cellpadding='0' border='0' class='EditTable' id='"+IDs.scrollelm+"_2'>"+
                "<tbody>"+
                    "<tr>"+
                        "<td>"+
                            "<hr class='ui-widget-content' style='margin: 1px' />"+
                        "</td>"+
                    "</tr>"+
                    "<tr>"+
                        "<td class='DelButton EditButton'>"+
                            "<a href='javascript:void(0)' id='dData' class='fm-button ui-state-default ui-corner-all'>Delete</a>"+
                            "&#160;<a href='javascript:void(0)' id='eData' class='fm-button ui-state-default ui-corner-all'>Cancel</a>"+
                        "</td>"+
                    "</tr>"+
                "</tbody>"+
            "</table>";

        if ($('#'+IDs.themodal).length===0) {
            // dialog not yet exist. we need create it.
            $.jgrid.createModal(
                IDs,
                dlgContent,
                {
                    gbox: "#gbox_"+gID,
                    caption: $.jgrid.del.caption,
                    jqModal: true,
                    left: 12,
                    top: 44,
                    overlay: 10,
                    width: 240,
                    height: 'auto',
                    zIndex: 950,
                    drag: true,
                    resize: true,
                    closeOnEscape: true,
                    onClose: null
                },
                "#gview_"+gID,
                $("#gview_"+gID)[0]);
            $("#dData","#"+IDs.scrollelm+"_2").click(function(){
                // "Delete" button is clicked
                var rowId = grid.jqGrid('getGridParam', 'selrow');
                grid.jqGrid('delRowData',rowId);
                //$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
                hideDialog();
            });
            $("#eData", "#"+IDs.scrollelm+"_2").click(function(){
                // "Cancel" button is clicked
                //$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
                hideDialog();
                //return false;
            });
        }

        $.jgrid.viewModal("#"+IDs.themodal,{gbox:"#gbox_"+gID,jqm:true, overlay: 10, modal:false});
    };

grid.jqGrid({/*jqGrid options*/});

$("#delgridrow").click(function() {
    rowId = grid.jqGrid('getGridParam', 'selrow');
    if (rowId === null) {
        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+grid[0].p.id,jqm:true});
        $("#jqg_alrt").focus();
    } else {
        createDeleteDialog();
    }

    return false;
});

var grid=$（“#列表”），
gID=grid[0].id，//grid[0].p.id，
ID={
模态：'delmod'+gID，
modalhead:'delhd'+gID，
模块内容：'delcnt'+gID，
Scrollem:'DelTbl_uu'+gID
},
hideDialog=函数（）{
$.jgrid.hideModal（“#”+IDs.themodal，{gb:“#gbox#”+gID，jqm:true，onClose:null}）；
},
罗维德，
createDeleteDialog=函数（）{
变量dlgContent=
""+
""+
""+
""+
""+
""+
""+
“+rowId+++//它没有那么多意义
""+
""+
“+$.jgrid.del.msg+”+
""+
""+
" "+
""+
""+
""+
""+
""+
""+
""+
""+
“
”+
""+
""+
""+
""+
""+
" "+
""+
""+
""+
"";
if（$（'#'+IDs.themodal）.length==0）{
//对话框尚不存在。我们需要创建它。
$.jgrid.createModal(
身份证，
DLG内容，
{
gbox:“gbox”+gID，
标题：$.jgrid.del.caption，
jqModal：是的，
左:12,，
排名：44，
覆盖：10，
宽度：240，
高度：“自动”，
zIndex:950，
是的，
调整大小：对，
closeOnEscape：没错，
onClose:null
},
“#gview”+gID，
$（#gview#+gID）[0]；
$（“#dData”，“#”+IDs.scrollM+“#2”）。单击（函数（）{
//单击“删除”按钮
var rowId=grid.jqGrid（'getGridParam'，'selrow'）；
jqGrid（'delRowData'，rowId）；
//$.jgrid.hideModal（“#”+IDs.themodal，{gb:“#gbox#”+gID，jqm:true，onClose:null}）；
hideDialog（）；
});
$（“#eData”，“#”+IDs.scrollem+“#2”）。单击（函数（）{
//单击“取消”按钮
//$.jgrid.hideModal（“#”+IDs.themodal，{gb:“#gbox#”+gID，jqm:true，onClose:null}）；
希迪达洛(
var popup = function (msg, title) {
  if ($('#clonePopup').length == 0) {
    var popupClose = $('.ui-icon-closethick');
    popupClose.clone().attr('id', 'clonePopup').insertAfter(popupClose);
    popupClose.hide();
    $('#alertcnt>div').html(msg);
    $('#alerthd>span').html(title);
    $('#clonePopup').click(function (e) {
        $('#alertmod').hide();
        $('#clonePopup').remove();
        $('#alertcnt>div').html(' אנא, בחר שורה');
        $('#alerthd>span').html('אזהרה');
        popupClose.removeAttr('style');
    });
    $('#alertmod').show();
  }  
}};

popup('Row saved successfully','Success');

$('#alertcnt>div') gets me the container for the title.
$('#alerthd>span') gets me the container for the message.
$('#alertmod') is then shown.

$('#clonePopup').click()  then resets the HTML to its original state to not interfere with jqGrid's normal operation. 

var popup = function (msg, title) {
    var modalcss = { position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', display: 'block', opacity: 0.4, filter: 'alpha(opacity=40)', 'background-color': '#000', 'text-align': 'center', 'z-index': 101 };
    var popupClose = $('.ui-icon-closethick');
    popupClose.clone().attr('id', 'clonePopup').insertAfter(popupClose);
    popupClose.hide();
  $('#alertcnt>div').html(msg);
    $('#alerthd>span').html(title);
    if ($('#tc_container').length) {
        $('#tc_container').css(modalcss);
    } else {
        $('<div>', { 'id': 'tc_container' }).css(modalcss).insertAfter($('#alertmod'));
    }

$('#clonePopup').click(function (e) {
    $('#alertmod').hide();
    $('#alertcnt>div').html(' אנא, בחר שורה');
    $('#alerthd>span').html('אזהרה');
    popupClose.removeAttr('style');
    $('#alertmod').css('display', '');
    $('#tc_container').attr('style', 'display:none;'); 
    $('#clonePopup').remove();
   });
   $('#alertmod').show();
};

popup('Row saved successfully','Success');