仅在单击某个按钮时显示弹出窗口

Question

片段：https://jsfiddle.net/boneill1292/uLjmy72h/8/

我有一段几乎可以正常工作的 sn-p 代码。我试图仅在单击按钮时才显示弹出窗口，而其他任何时候都不会。您将在 sn-p 中看到，如果您在第一次尝试时单击“报告”按钮，它将生成两个选项：

场景一：第一次加载页面并单击“报告”按钮时，您可以点击“报告 1”或“删除页面”，两个链接都可以正常工作。如果您单击“x”，弹出窗口将关闭并且不会发生任何其他事情。

场景二：如果您点击“报告”按钮，然后点击“删除页面”按钮并取消随后的弹出窗口。然后点击“报告”按钮（再次）并点击“x”关闭弹出删除弹出窗口（这不应该发生）。我很确定这是由以下代码引起的：但我想我会用 data-dismissible="false"

来阻止它

$("#reportsPopupDialog")
    .on("popupafterclose",
        function() {
            $('#exportPopupDialog').popup('open');
        });

我很抱歉这么罗嗦，但我想不出更好的方式来描述它。如果这样做完全错误，我的感情不会受到伤害，所以请继续告诉我。

非常感谢！

Answer 1

好吧，通过单击#deleteid，您将事件监听器popupafterclose 添加到#reportsPopupDialog，该弹出窗口关闭时将始终触发。 而是在单击 #deleteid 按钮时显示 popupDialog

$("#deleteid").click(function() {
  $('#reportsPopupDialog').popup('close');
  setTimeout(showDeletePopup, 500);
});
function showDeletePopup () {
  $('#popupDialog').popup('open');
}

这是jsFiddle

注意：setTimeout 是因为你不能同时有两个弹出窗口，所以你需要等待一个弹出窗口完全关闭才能打开下一个