如何自定义Javascript对话选项?
How to customize the Javascript Dialogue options?
我在一个电子商务网站上工作,我想显示一个 Javascript 对话框,其中有两个选项 "Go to Cart" 和 "Continue Shopping",
如果用户点击第一个选项控件将重定向到购物车页面,如果用户选择第二个选项控件将转到主页。
我可以选择使用 javascript 的 Confirm() 函数,但我无法将其选项更改为 "Add to cart" 和 "Continue Shopping"
如何显示这样的对话框?
对你来说最好的选择是使用 sweet alert,我在一些项目中使用它,它非常简单而且看起来不错。尽量不要用javascript的confirm...不是很专业
https://limonte.github.io/sweetalert2/
您可以从那里下载它并查看一些示例。对于你的问题,sweet alert 可以这样做:
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();}})
您不能自定义确认对话框,但是有几个用于警报的库,
以下是一些用于此目的的知名库
- 引导箱
- AmaranJS
- Notie.js
- 甜蜜警报
- Alertify.js
尝试使用 Vex 插件来提醒它最好的 UI 元素样式和自定义选项之一
尝试Notie.js
它是一个干净简单的通知、输入和选择套件,适用于 javascript,没有依赖性。
我在一个电子商务网站上工作,我想显示一个 Javascript 对话框,其中有两个选项 "Go to Cart" 和 "Continue Shopping", 如果用户点击第一个选项控件将重定向到购物车页面,如果用户选择第二个选项控件将转到主页。
我可以选择使用 javascript 的 Confirm() 函数,但我无法将其选项更改为 "Add to cart" 和 "Continue Shopping"
如何显示这样的对话框?
对你来说最好的选择是使用 sweet alert,我在一些项目中使用它,它非常简单而且看起来不错。尽量不要用javascript的confirm...不是很专业
https://limonte.github.io/sweetalert2/
您可以从那里下载它并查看一些示例。对于你的问题,sweet alert 可以这样做:
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();}})
您不能自定义确认对话框,但是有几个用于警报的库,
以下是一些用于此目的的知名库
- 引导箱
- AmaranJS
- Notie.js
- 甜蜜警报
- Alertify.js
尝试使用 Vex 插件来提醒它最好的 UI 元素样式和自定义选项之一
尝试Notie.js 它是一个干净简单的通知、输入和选择套件,适用于 javascript,没有依赖性。