如何自定义Javascript Dialogue选项?

时间:2017-11-08 11:42:39

标签: javascript dialog alert confirm

我正在开发一个电子商务网站,我想显示一个带有两个选项的Javascript对话框"转到购物车" &安培; "继续购物", 如果用户点击第一个选项控件将重定向到购物车页面,如果用户选择第二个,它将转到主页。

我可以选择使用javascript的Confirm()函数,但我无法将其选项更改为"添加到购物车"和"继续购物"

如何显示这样的对话框?

4 个答案:

答案 0 :(得分:3)

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

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

  • Bootbox
  • AmaranJS
  • Notie.js
  • Sweet Alert
  • Alertify.js

答案 1 :(得分:2)

尝试将Vex插件用于警报,这是其中一个最佳的UI元素样式和自定义选项

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

答案 2 :(得分:2)

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

You can get it from here

答案 3 :(得分:1)

最好的选择是使用甜蜜警报,我在某些项目中使用它,它非常简单,看起来很棒。尽量不要使用javascript' s确认...不是很专业

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();}})