Question: How to customize the Javasript Dialogue options?

Question

How to customize the Javasript Dialogue options?

Answers 3
Added at 2017-11-08 12:11
Tags
Question

I am working on an e-commerce website, I want to display a Javasript 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?

Answers to

How to customize the Javasript Dialogue options?

nr: #1 dodano: 2017-11-08 13:11

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();}})
nr: #2 dodano: 2017-11-08 15:11

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
nr: #3 dodano: 2017-11-08 19:11

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

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

Source Show
◀ Wstecz