Javascript 什么'；打开模式窗口的最佳方式是什么？让打开功能等待模式关闭（不使用框架）？

当我想在javascript中打开模态框时，我会使用一些代码，但是直到现在，初始函数设置模态框，然后退出，模态窗口中的“return”按钮调用第二个函数。这是可行的，但有点笨拙（这意味着我需要以隐藏形式或全局变量传递所有尚未完成的变量）

我知道javascript应该是异步的，我所要求的（基本上就像VB中使用的模态形式）可能等同于亵渎，但我仍然想知道如何做到这一点

我怀疑承诺可能是答案，但我不知道如何适应通常给出的示例（超时或文件访问）；我几乎肯定错过了一些东西，因为我从来没有真正能够计算出承诺的USP，尽管人们在承诺出来时对它们有多么热情

目前，我的代码不使用任何框架或jquery——如果可能的话，我宁愿将jquery排除在外（在过去，我代码中的某些错误往往会导致库中出现错误，这使得调试非常糟糕），如果有简单的纯javascript解决方案，我真的不想学习框架

编辑（尝试实施@CtrlAltDel的建议）：

函数JPrompt（sTitle，sDefault=“”）{
var divPrompt=document.createElement（“div”）
divPrompt.id='div\u id'
divPrompt.innerHTML=sTitle+“”
document.body.appendChild（divPrompt）；
var p=新承诺（功能（解决、拒绝）{
btnFunc=函数（e）{
如果（val==“正常”）{
var input=form.querySelector（“input，TEXTAREA”）；
如果（！input）input=“true”；
else输入=input.value；
解析（输入）；
}否则{
解析（空）；
}       
}
});
document.getElementById（'butConfirm'）。addEventListener（“单击”，btnFunc）；
p、 然后（函数（res）{
结果=document.getElementById（'texPromptNumber'）。值
警报（结果）
document.getElementById（'divPrompt'）。outerHTML=“”
});
}

• 我不知道addEventListener是否在正确的位置；我必须使btnFunc全球化，这样代码才能看到它

• 这仍然可以直接运行到后面的代码，而无需等待按下按钮。所以我试了一下：

函数JPrompt（sTitle，sDefault=“”）{
函数setPrompt（）{
var divPrompt=document.createElement（“div”）
divPrompt.id='div\u id'
divPrompt.innerHTML=sTitle+“”
document.body.appendChild（divPrompt）；
返回新承诺（功能（解决、拒绝）{
btnFunc=函数（e）{
解析（输入）
};
});   
document.getElementById（'butConfirm'）。addEventListener（“单击”，btnFunc）；
}
异步函数getPrompt（）{
var result=await setPrompt（）
结果=document.getElementById（'texPromptNumber'）。值
警报（结果）
document.getElementById（'divPrompt'）。outerHTML=“”
}
getPrompt（）；
}

---

几乎同样的事情也发生了。我做错了什么？

答案是使用

承诺。您可能还希望使用异步函数，以便
等待承诺的结果

  let p = new Promise(function (resolve, reject) {

    let btnFunc = function (e) {
        if (val === "Ok") {
          var input = form.querySelector("INPUT, TEXTAREA");
          if (!input) input = "true";
          else input = input.value;
          resolve(input);
        } else {
          resolve(null);
        }
        $(dialogDiv).detach();
    }
  }

这只是一个示范。您需要向div添加一个Ok和一个Cancel按钮，并使用addEventListener（'click'）和按钮来激活btnFunc

另一方面，您可以使用
var res=wait p
或p.then（函数（res）{…}），以在承诺实现后获得承诺中设置的结果

在较新版本的Chrome和FireFox中还有一个非标准的“Dialog”标签，您可以使用它

---编辑---

如果模态零件很重要，这里有一个示例说明如何做到这一点：

它包括创建一个背景层使其工作，并将其打开和关闭，这对我的血液来说是非常重要的。
恐怕还是有点困惑-我已经用我目前掌握的代码编辑了这个问题。
function JPrompt(sTitle,sDefault=""){
     function setPrompt(){
     var divPrompt=document.createElement("div")
     divPrompt.id='div_id'
     divPrompt.innerHTML=sTitle+"<form><input type=number id='texPromptNumber' /><input type=button id='butConfirm' value=OK data-info='3' /></form>"
     document.body.appendChild(divPrompt);
        return new Promise(function (resolve, reject) {

            btnFunc = function (e) {
                resolve(input)
            };
      });   
        document.getElementById('butConfirm').addEventListener("click",btnFunc);
    }
    
        
    


    async function getPrompt(){
        var result=await setPrompt()
        result=document.getElementById('texPromptNumber').value
        alert(result)
        document.getElementById('divPrompt').outerHTML=""
    }
    getPrompt();
}

  let p = new Promise(function (resolve, reject) {

    let btnFunc = function (e) {
        if (val === "Ok") {
          var input = form.querySelector("INPUT, TEXTAREA");
          if (!input) input = "true";
          else input = input.value;
          resolve(input);
        } else {
          resolve(null);
        }
        $(dialogDiv).detach();
    }
  }