如何从jQuery UI模态对话框获取返回值？替代window.opener方案

嘿，我来帮你搞定这个问题！首先得纠正你之前代码里的一个关键错误，再给你讲怎么优雅地拿到对话框的返回值。

一、先把对话框状态判断的坑填上 #

你之前用$('#dialog').dialog('open')来判断对话框是否打开，这完全不对哦——dialog('open')是执行打开对话框的动作，它返回的是jQuery对象（永远为真），不管对话框之前是不是开着的。正确的姿势是用dialog('isOpen')方法，它会返回布尔值true（已打开）或false（已关闭）。

比如你要实现“若对话框未打开则刷新页面”的逻辑，代码得这么写：

$('#button').click(function () {
  // 检查对话框当前是否处于关闭状态
  if (!$('#dialog').dialog('isOpen')) {
    // 未打开就刷新页面
    location.reload();
  } else {
    // 对话框已打开时的操作（比如提示用户）
    alert('对话框已经在打开状态啦！');
  }
});

这里我多嘴问一句：你点击按钮本来是要开对话框的，为啥未打开时要刷新？如果是怕对话框初始化失败，那可以结合对话框的open事件来判断，后面我会提到~

二、轻松获取对话框的返回值 #

和window.open不一样，jQuery UI的模态对话框是在当前页面DOM里渲染的，根本不用window.opener，直接用回调、自定义事件就能传值，给你两种常用方案：

方案1：用回调函数（最推荐） #

初始化对话框时传入一个回调函数，在对话框的确认按钮点击时调用这个函数并传值，代码模块化还不污染全局变量。

$(function() {
  // 初始化对话框，默认关闭
  $('#dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "确认": function() {
        // 拿对话框里的输入值（示例用输入框）
        var returnValue = $('#dialog-input').val();
        // 调用预定义的回调函数，传递返回值
        handleDialogResult(returnValue);
        // 关闭对话框
        $(this).dialog('close');
      },
      "取消": function() {
        $(this).dialog('close');
      }
    }
  });

  // 按钮点击事件：打开对话框
  $('#button').click(function() {
    $('#dialog').dialog('open');
    // 可选：如果怕对话框打开失败，延迟判断后刷新
    setTimeout(() => {
      if (!$('#dialog').dialog('isOpen')) {
        location.reload();
      }
    }, 100);
  });

  // 处理返回值的函数
  function handleDialogResult(value) {
    // 这里随便你怎么处理值，比如显示到页面上
    $('#result').text('从对话框拿到的值：' + value);
  }
});

对应的HTML结构：

<button id="button">打开模态对话框</button>
<div id="dialog" title="请输入内容">
  <input type="text" id="dialog-input" placeholder="输入要返回的值">
</div>
<div id="result"></div>

方案2：触发自定义事件 #

如果你的代码结构比较复杂，用自定义事件传值会更灵活：

$(function() {
  $('#dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "确认": function() {
        var returnValue = $('#dialog-input').val();
        // 触发自定义事件，把值带过去
        $(document).trigger('dialog:return', [returnValue]);
        $(this).dialog('close');
      },
      "取消": function() {
        $(this).dialog('close');
      }
    }
  });

  $('#button').click(function() {
    $('#dialog').dialog('open');
  });

  // 监听自定义事件，接收返回值
  $(document).on('dialog:return', function(event, value) {
    $('#result').text('通过事件拿到的值：' + value);
  });
});

三、最后补个小提醒 #

• 一定要确保正确引入了jQuery和jQuery UI的JS/CSS文件，不然对话框可能初始化失败，导致isOpen一直返回false。
• 模态对话框打开后会阻塞页面其他操作，所以要判断是否打开成功的话，最好用setTimeout或者监听dialogopen事件。

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