How to configure Javascript dialog options?

Question

I am working on an e-commerce site, I want to display a Javascript dialog with two options “Go to the cart” and “Continue shopping”. If the user clicks on the first parameter control, he will be redirected to the “Cart” page and if the user selects the second, he will go to the main page.

I have the opportunity to use the javascript Confirm () function, but I can’t change its settings to “Add to Cart” and “Continue Shopping”

How can I display such a dialog box?

Answer 1

You cannot customize the confirmation dialog, but there are several libraries for alerts,

Below are some well-known libraries for this purpose.

• Bootbox
• Amaranjs
• Notie.js
• Sweet warning
• Alertler.js

Answer 2

Try the Vex plugin for alerts about its one of the best UI style elements and customization

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

Answer 3

Try Notie.js Its a clean and simple set of notifications, input and choices for javascript without dependencies.

You can get it here.

Answer 4

The best option for you is to use a sweet warning, I use it in some projects, and it is very simple and looks good. Try not to use javascript confirmation ... not very professional

https://limonte.imtqy.com/sweetalert2/

You can download it there and see some examples. For your problem, a sweet warning might 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();}})