我要做一个按钮,采取行动并将数据保存到数据库中。

一旦用户单击按钮,我希望JavaScript警报提供“是”和“取消”选项。如果用户选择“是”,数据将被插入数据库,否则将不采取任何操作。

如何显示这样的对话框?


当前回答

与其他解决方案不同的另一个解决方案是使用新的对话框元素。您需要使用基于与其他元素交互的show或showModal方法。close方法可用于关闭打开的对话框。

<dialog>
  <button class="yes">Yes</button>
  <button class="no">No</button>
</dialog>

const dialogEl=document.querySelector(“对话框”);const openDialog=document.querySelector(“button.open dialog”);const yesBtn=document.querySelector(“.yes”);const noBtn=document.querySelector(“.no”);const result=document.querySelector(“.result”);openDialog.addEventListener(“单击”,()=>{dialogEl.showModal();});yesBtn.addEventListener(“单击”,()=>{//以下行可以由您的DB查询替换result.textContent=“这可能是您的DB查询”;dialogEl.close();});noBtn.addEventListener(“单击”,()=>{result.textContent=“”;dialogEl.close();});@导入url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');正文{字体系列:“Roboto”;}按钮{背景:hsl(206deg 64%51%);颜色:白色;衬垫:0.5em 1em;边框:0无;光标:指针;}对话框{边框:0无;}.结果{页边距:1em;}<对话框><button class=“yes”>是</button><button class=“no”>否</button></dialog><button class=“open dialog”>单击我</button><div class=“result”></div>

我可以使用吗?

目前,与所有现代浏览器的兼容性都很好。

其他回答

document.getElementById("button").addEventListener("click", function(e) {
   var cevap = window.confirm("Satın almak istediğinizden emin misiniz?");
   if (cevap) {
     location.href='Http://www.evdenevenakliyat.net.tr';       
   }
});

您可以使用JavaScript拦截onSubmit事件。

然后调用确认警报,然后获取结果。

我目前正在开发一个web工作流,它已经有了自己的通知/对话框,我最近(比如今天)创建了一个小型的自定义(并根据项目需要定制)是/否对话框。

所有对话框都显示在模态图层上。需要用户充分注意。

我以这种方式定义选项配置。此选项用于定义按钮文本,以及单击时与每个按钮关联的值:

optionsConfig = [
   { text: 'Yes', value: true },
   { text: 'No', value: false }
]

函数的用法如下:

const answer = await notifier.showDialog('choose an option', options.config);
if (answer) {
   // 'Yes' was clicked
} else {
   // 'No' was clicked!
}

我所做的只是为每个选项创建一个异步事件处理程序,这意味着每个按钮都有一个简单的处理程序。每个处理程序都返回选项的值。处理程序被推入数组中。然后将数组传递给Promise.rece,这是showDialog方法的返回值,它将对应于值的实际值(由处理程序返回的值)。

无法提供太多代码。正如我所说,这是一个非常具体的案例,但这个想法可能对其他实现有用。大约二十行代码。

或者简单地:

<a href="https://some-link.com/" onclick="return confirm('Are you sure you want to go to that link?');">click me!</a>
var answer = window.confirm("Save data?");
if (answer) {
    //some code
}
else {
    //some code
}

使用window.conf而不是alert。这是实现该功能的最简单方法。