如何让jQueryUI对话框动态加载内容

这并不难做到——我不会一开始就为这件事和iframes打交道。像这样的怎么样?

$( ".selector" ).dialog({
   open: function(event, ui) {
     $('#divInDialog').load('test.html', function() {
       alert('Load was performed.');
     });
   }
});

<div id="divInDialog"></div> ,应该在对话框中 <div class="selector"/> .

<div id="dialog-confirm"><div>

设置a 具有 自动打开=错误 ;

    $("#dialog-confirm").dialog({
        resizable: false,
        autoOpen: false,
        height:140,
        modal: true,
        buttons: {
          'Delete all items': function() {
            $(this).dialog('close');
          },
         Cancel: function() {
            $(this).dialog('close');
         }
       }
   });

然后,当您想要加载一个动态页面时,使用jqueryajax调用将html动态地放入div中,然后调用 对话框打开 下面是一个通过点击按钮加载动态页面的例子。

  $("#someButton").click(function()
  {
       $.post("Controller/GetPage", function(data){
            $('#dialog-confirm').html(data);
            $('#dialog-confirm').dialog('open');
       }, "html")};
  }

另外,如果在ajax调用中加载页面需要一段时间,则可能需要使用一些加载图像或 jquery blockui plugin 显示有东西在加载

我会亲自为您的对话框创建一个“视图”,然后扩展到正在生成的对话框上。对于一个测试用例,我使用了以下“视图”:

var dialog = {
    title: 'Dialog WITHOUT Modal',
    modal: false,
    height: 300
};

然后扩展到对话框:

$('#modal-btn-btns').click(function(){
    $('#dialog-modal-btns')
        .dialog($.extend(dialog, {
            modal: true,
            width: 500,
            title: "Dialog with modal AND buttons",
            buttons: {
                "Trigger ALERT": function(){alert("NICE CLICK!@!@!")},
                "Cancel": function(){$(this).dialog('close');}
            }
        }))
        .html('This form has buttons!');
});