官方网站下载水印相机,互联网上市公司排名,产品设计专业最好的大学,修复WordPress图片上传错误最近在做一个Asp.net MVC的项目#xff0c;里面用部分视图页弹层#xff0c;感觉很不爽#xff0c;用着别扭。在前后端分离的项目里#xff0c;我们肯定用封装好的前端UI库了#xff0c;比如element ui#xff0c;但是 Asp.net MVC的项目里面集成这个比较困难...... 就找…最近在做一个Asp.net MVC的项目里面用部分视图页弹层感觉很不爽用着别扭。在前后端分离的项目里我们肯定用封装好的前端UI库了比如element ui但是 Asp.net MVC的项目里面集成这个比较困难...... 就找了个前端弹层组件 SweetAlert2 点击转到官网 还有一个 SweetAlert 2 全网最详细的使用方法
我自己测试过的例子在下面功能非常全面我觉得完全够用了唯一不好得就是 html 要拼接字符串......
// 定义表单提交函数
function submitForm(formData) {// 使用 AJAX 将表单数据发送到控制器$.ajax({url: /SampleController/SubmitForm,type: POST,data: JSON.stringify(formData), // 将对象转换为 JSON 字符串contentType: application/json, // 设置请求的内容类型为 JSONsuccess: function(response) {Swal.fire({title: 表单提交成功,text: response.message,icon: success,confirmButtonText: 确定, // 确定按钮文本showConfirmButton: false, // 不显示确定按钮timer: 2000, // 定时器2秒后自动关闭对话框onClose: function() {// 对话框关闭后的回调函数// 可以在这里执行其他操作}});},error: function(xhr, status, error) {Swal.fire({title: 错误,text: 表单提交失败,icon: error,confirmButtonText: 确定 // 确定按钮文本});}});
}// 当按钮被点击时打开 SweetAlert2 对话框
document.getElementById(openDialogButton).addEventListener(click, function() {const fixedWidth 80px; // 定义固定宽度const htmlContent div styledisplay: flex; align-items: center;label forinput1 stylewidth: ${fixedWidth};内容1:/labelinput typetext idinput1 nameinput1 classswal2-input/divdiv styledisplay: flex; align-items: center;label forinput2 stylewidth: ${fixedWidth};内容2:/labelinput typetext idinput2 nameinput2 classswal2-input/div;Swal.fire({title: 填写内容,html: htmlContent,customClass: {container: my-swal-container // 添加自定义 CSS 类名},focusConfirm: false,cancelButtonText: 取消, // 取消按钮文本showCancelButton: true, // 显示取消按钮confirmButtonText: 确定, // 确定按钮文本showCloseButton: true, // 显示关闭按钮preConfirm: function() {const input1Value Swal.getPopup().querySelector(#input1).value;const input2Value Swal.getPopup().querySelector(#input2).value;// 验证用户输入if (!input1Value || !input2Value) {Swal.showValidationMessage(请填写所有内容);return false;}// 封装表单数据为对象const formData {input1: input1Value,input2: input2Value};// 调用表单提交函数submitForm(formData);// 返回一个 Promise 对象用于关闭对话框return Promise.resolve();}});
});
