将window.showModalDialog迁移至jQuery UI Dialog：dialogArguments替代方案

原来的window.showModalDialog靠dialogArguments在主窗口和弹窗间共享上下文，但jQuery UI Dialog是在当前页面DOM里创建的模态容器，咱们可以通过直接绑定事件或者全局回调函数的方式实现值传递，下面给你两种实用方案：

方案一：加载弹窗内容后直接绑定点击事件（推荐） #

这种方式不用改弹窗页面的代码，直接在主页面管控弹窗元素的交互逻辑，可控性更强还能避免全局依赖：

修改new_main.html的PopUp2函数： #

function PopUp2(page, Width, Height) {
  var pagetitle = "test";
  var $dialog = jq('<div></div>')
    // 弹窗内容加载完成后执行回调
    .load(page, function() {
      // 给弹窗里的所有<li>绑定点击事件
      $dialog.find('li').on('click', function() {
        // 获取点击的文本值
        var selectedValue = jq(this).text();
        // 给主页面的输入框赋值
        jq('#type').val(selectedValue);
        // 关闭弹窗
        $dialog.dialog('close');
      });
    })
    .dialog({
      autoOpen: false,
      modal: true,
      height: Height, // 修正原代码的参数错误：height要对应Height变量
      width: Width,
      title: pagetitle,
      resizable: false,
      close: function() {
        // 弹窗关闭后销毁容器，避免重复绑定事件
        jq(this).remove();
      }
    });
  $dialog.dialog('open');
}

小提示： #

• 用.load()的回调确保弹窗内容加载完成后再绑定事件，不然找不到<li>元素
• 直接通过主页面的jQuery对象操作输入框，不用跨窗口传值，逻辑更清晰
• 关闭弹窗时销毁容器，防止多次打开弹窗导致事件重复绑定

方案二：通过全局回调函数传递值 #

如果想保留弹窗页面的原有逻辑，可以在主页面定义全局函数，让弹窗页面直接调用：

步骤1：在new_main.html中添加全局赋值函数 #

// 主页面定义全局函数，接收弹窗传来的值
function setMainInputValue(value) {
  jq('#type').val(value);
}

步骤2：修改popup.html的getvalue函数 #

function getvalue(value) {
  // 调用主页面的全局函数传递值
  window.parent.setMainInputValue(value);
  // 关闭jQuery UI弹窗（通过主页面的jQuery对象操作）
  window.parent.jq('.ui-dialog-content').dialog('close');
}

小提示： #

• window.parent指向主页面的window对象，因为弹窗内容是加载到主页面DOM里的
• 这种方式适合弹窗逻辑复杂、需要保留原有函数的场景，但依赖全局函数，灵活性不如方案一

内容的提问来源于stack exchange，提问作者forst