如何自定义Javascript Dialogue选项？

Posted 2021-04-18

我正在开发一个电子商务网站，我想显示一个javascript对话框，其中有两个选项“转到购物车”和“继续购物”，如果用户点击第一个选项控件将重定向到购物车页面，如果用户选择第二个它将转到主页。

我可以选择使用javascript的Confirm（）函数，但我无法将其选项更改为“添加到购物车”和“继续购物”

如何显示这样的对话框？

答案

您无法自定义确认对话框，但有几个警报库，

以下是一些众所周知的图书馆

• Bootbox
• Amrjas
• Notie.js
• 甜蜜警报
• Alertify.js

另一答案

尝试Vex插件警报它是最好的UI元素样式和自定义选项之一

http://github.hubspot.com/vex/docs/welcome/

另一答案

尝试Notie.js它是一个简洁的通知，输入和选择套件，适用于没有依赖关系的javascript。

You can get it from here

另一答案

对你来说最好的选择就是使用甜蜜警报，我在一些项目中使用它，这很容易看起来很好。尽量不要使用javascript的确认......不是很专业

https://limonte.github.io/sweetalert2/

你可以从那里下载并查看一些例子。对于您的问题，甜蜜警报可以做这样的事情：

swal({  title: 'Are you sure?',  text: "You won't be able to revert this!",  type: 'warning',  showCancelButton: true,  confirmButtonColor: '#3085d6',  cancelButtonColor: '#5bc0de',  confirmButtonText: 'Go to cart',  cancelButtonText: 'Continue shopping!',  confirmButtonClass: 'btn btn-success',  cancelButtonClass: 'btn btn-info',  buttonsStyling: false}).then(function () {//redirect to the cart pagewindow.location.assign("/thecartpage.yourextension");}, function (dismiss) {  // dismiss can be 'cancel', 'overlay',  // 'close', and 'timer'... use cancel to this.  if (dismiss === 'cancel') {//Here you close the modal    swal().close();}})