Jquery flexigrid弹出模式窗口

我试图创建一个脚本，用它作为显示数据库信息的方法，但我希望用户也能够将信息输入数据库。我想能够启动一个模式窗口，用户可以输入信息并提交它。FLEXIGRID上的按钮编码方式如下：

$(document).ready(function(){

 $("#flex1").flexigrid
   (
   {
   url: 'post2.php',
   dataType: 'json',
   colModel : [
    {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
......
   buttons : [
    {name: 'Add', bclass: 'add', onpress : test},
    {separator: true},
    {name: 'Delete', bclass: 'delete', onpress : test},
    {separator: true},
.... some more code ...

   }
   );   

});
function test(com,grid)
{
    if (com=='Add')
    {
              the code that triggers the modal window
    }
}

好吧，我的问题是：

当我按下“添加”时，我希望出现一个模式弹出窗口，使用Ajax加载本地文件的内容，以便用户可以输入信息

到目前为止，我所拥有的：

我尝试使用以下代码： 加载CSS和Javascript：

<link rel="stylesheet" type="text/css" href="css/jqmodal.css" /> 
<script type="text/javascript" src="js/jqModal.js"></script>
$().ready(function() {
$('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger'});
});

---

以下示例将使用jQuery UI对话框

$("#myDialog").dialog({
    autoOpen: false, position: 'center', stack: true, height: 'auto', width: 'auto', modal: true
});

首先定义对话框所需的标记：

<div id="myDialog" style="display:none" title=""></div>

请注意

autoOpen:false

参数

当您想显示对话框时，只需在代码内部调用open方法

function test(com,grid) {
    if (com=='Add') {
        $("#myDialog").dialog('open');
    }
}

希望有帮助

更新：

---

我已经在jsbin.com上为您创建了一个示例。您可以看到它在工作，同时也可以看到代码

Chris19是由于使用visualstudio2008作为jquery使用css3验证而导致的css类错误。VS2008不支持css3验证，因此jquery css的某些元素是未知的

---

快速修复方法是转到“工具”->“选项”->“显示所有复选框”->“文本编辑器”->“Css”->“Css特定”，然后关闭检测功能

Hi Lorenzo，不幸的是，我无法让它工作，如果我复制/粘贴你的代码，网格甚至无法加载。记下要说的话。谢谢，C.您是否包含了jQuery UI javascript文件和css？@Chris19:您缺少jQuery包含脚本。另外，jQueryUIInclude的末尾有两个“.js”。是这样吗？我使用的是FlexGrid附带的jquery 1.2.3版本包，你说得对，我有一个双“js”。在我删除了double后，如果我按add按钮，我会得到叠加，但没有消息？？！！我认为这个版本有点过时，可能不适合jQueryUI1.7.3。从flexigrid包中，我只包括flexigrid.js和flexigrid.css。然后我使用jquery最新版本的核心和UI。

<div id="myDialog" style="display:none" title=""></div>

$("#myDialog").dialog({
    autoOpen: false, position: 'center', stack: true, height: 'auto', width: 'auto', modal: true
});

function test(com,grid) {
    if (com=='Add') {
        $("#myDialog").dialog('open');
    }
}