最近在做一个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 style="display: flex; align-items: center;"><label for="input1" style="width: ${fixedWidth};">内容1:</label><input type="text" id="input1" name="input1" class="swal2-input"></div><div style="display: flex; align-items: center;"><label for="input2" style="width: ${fixedWidth};">内容2:</label><input type="text" id="input2" name="input2" class="swal2-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();}});
});
)
)
)