如何让模态弹窗的‘X’按钮与Ok按钮均实现跳转至其他站点？

我来帮你搞定这个问题！你现在的代码只在Ok按钮的点击事件里添加了页面跳转逻辑，但右上角的关闭按钮（X）触发的是jQuery UI Dialog的close事件，并没有绑定跳转行为。我们只需要给弹窗添加一个全局的close回调，就能让所有关闭弹窗的方式（点X、点Ok、按ESC键）都执行跳转。

修改后的完整代码 #

HTML部分

<input type="submit" id="uniqueCode" name="submit" value="Submit" />
<div id="dialog-message" title="Reference Return Code">
    <!-- 这里可以填入你要展示的弹窗内容 -->
</div>

JavaScript部分

$(document).ready(function() {
    $("#dialog-message").css("display", "none");

    $("#uniqueCode").click(function() {
        $("#dialog-message").dialog({
            modal: true,
            width: 400,
            height: 250,
            position: { my: "center", at: "center", of: window },
            buttons: {
                Ok: {
                    text: "Ok",
                    id: "subBtn",
                    click: function() {
                        // 点击Ok时先关闭弹窗，触发close事件
                        $(this).dialog("close");
                    }
                }
            },
            // 绑定close事件，所有关闭弹窗的操作都会触发这个回调
            close: function() {
                window.location.href = "google.com";
            }
        });
    });
});

关键修改说明 #

• 把原来Ok按钮里的跳转逻辑移到了Dialog的close回调函数中，这样不管用户用哪种方式关闭弹窗，都会触发这个回调执行跳转。
• Ok按钮的点击事件现在只负责关闭弹窗，跳转逻辑由统一的close事件处理，保证了行为的一致性。

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