如何自定义Javascript Dialogue选项？

Question

I am working on an e-commerce website, I want to display a Javascript dialogue box with two options "Go to Cart" & "Continue Shopping", If user clicks on first option control will redirect to Cart page and if user chooses second one it will go to Home page.

I have an option of using javascript's Confirm() function but I can not change its options to "Add to cart" and "Continue Shopping"

How can I display such a dialog?

Answer 1

You can not customize confirm dialogue box, but there are several libraries for alerts,

Following are some well known libraries for such purpose

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

Answer 2

The best option to you is to use sweet alert, I'm using it in some projects and it's really easy and looks good. Try not to use javascript's confirm... is not very professional

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

you can download it from there and see some examples. For your problem, sweet alert can do something like this:

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

Answer 3

Try Vex plugin for alerts its one of the best UI elements styling and customizing option

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

Answer 4

Try Notie.js Its a clean and simple notification, input, and selection suite for javascript with no dependencies.

You can get it from here