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

Show popup only when a certain button is clicked

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

我有一段几乎可以正常工作的代码。我试图仅在单击按钮时显示弹出窗口,而不是其他任何时候。您将在代码段中看到,如果您第一次尝试单击 'Reports' 按钮,它将生成两个选项:

场景一:第一次加载页面并单击 'Reports' 按钮时,您可以单击 'Report 1' 或 'Delete Page',这两个链接都可以正常工作。如果您单击 'x',弹出窗口将关闭并且不会发生任何其他事情。

情况二:如果您单击 'Reports' 按钮,然后单击 'Delete Page' 按钮和 取消 随后的弹出窗口。然后点击 'Reports' 按钮(再次)并点击 'x' 关闭弹出窗口,删除弹出窗口出现(这不应该发生)。我非常确定这是由以下代码引起的:但我想我会用 data-dismissible="false"

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

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

非常感谢!

好吧,通过单击 #deleteid,您将 eventListener popupafterclose 添加到 #reportsPopupDialog,它将始终在该弹出窗口关闭时触发。 而只是在单击 #deleteid 按钮时显示 popupDialog

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

这是一个jsFiddle

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