jquery UI diloag

官网地址：http://api.jqueryui.com/dialog/#option-hide

 

1.简单的采用div加载

<div id="dialog">
  <form id="dialogForm" method="post" action="user/add">
   <table>
    <tr>
     <td>名字：</td>
     <td>
      <input type="text" name="name"/>
     </td>
    </tr>
    <tr>
     <td>年龄：</td>
     <td>
      <input type="text" name="age"/>
     </td>
    </tr>
   </table>
  </form>
 </div>

$("#dialog").dialog({
   modal: true,
   autoOpen: false,
   buttons:{
    "确定":function(){
     var form = $("#dialogForm");
     $.ajax({
            url:form.attr('action'),
            type:form.attr('method'),
            data:form.serialize(),
            dataType:"json",
            success:function(data){
             $("#dialog").dialog("close");
             alert("成功啦");
            },
            error:function(){
             $("#dialog").dialog("close");
             alert("出错了哦");
            }
     }
    },
    "关闭": function() {
     $("#dialog").dialog("close");
    }
   }
  });

2.jquery diloag采用动态URL的方式，需要使用iframe

  eg:

var html =
              '<div style="width:800px;height:600px;" id="dialogtest" title="Item Query">' +
              ' <iframe id="iframe" src="/app/fditemmaster/entryFdQuery" frameBorder="0" style="border:0;" scrolling="no" width="100%" height="100%"></iframe>' +
              '</div>';

                $(html).dialog({
                 bgiframe: true,
                 resizable: true,
                 width :800,
                 height:600,
                 modal: true,
                 overlay: {
                     backgroundColor: '#000',
                     opacity: 0.5
                 },
                 close:function()
                 {
                      //彻底删除div标签
                  $(this).remove();
                 }
             });

a.父窗口调用iframe中的方法

   window.frames["iframe1"].contentWindow.test();

b.iframe中调用父窗口中的方法

    window.parent.closeDialog();

c.iframe中查找父窗口中的元素

    $("body", parent.document).find('#itemId_autocomplete').attr("value",
    data);
d.父窗口中查找子窗口元素

    $('iframe').contents().find('.c_div').html();

3.相关网站链接
   http://www.cnblogs.com/mybest/archive/2011/12/02/2271940.html