企业网站方案设计,《教师网站建设与应用管理制度》,建网站pc版 (报价),徐州网站建设青州陈酿目录
一、背景
二、操作方法
2.1修改前
2.2修改后
三、总结
附#xff1a;参考文章#xff1a; 一、背景
最近在以前的asp.net网页中#xff0c;每次点击确定都弹窗#xff0c;然后还要弹窗点击确认#xff0c;太麻烦了#xff0c;这次想升级一下#xff0c;实现…目录
一、背景
二、操作方法
2.1修改前
2.2修改后
三、总结
附参考文章 一、背景
最近在以前的asp.net网页中每次点击确定都弹窗然后还要弹窗点击确认太麻烦了这次想升级一下实现类似安卓toast的弹窗提示方式。于是百度了一下目前看到有两种sweetalert和toastr。
这里讲一下我使用sweetalert(SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScripts popup boxes)的操作。
二、操作方法
2.1修改前
原来的代码
var title 报警确认;
$.messager.confirm(Confirm, 是否确认报警? br/报警类别: FAlertID br/ 报警内容: FAlarmInfo, function (r) {if (r) {$.ajax({url: /AlertConf,data: {FID:FID},type: POST,success: function (data) {if (data 0) {$.messager.alert(错误提示, 登录信息出现变化请重新登录);} else if (data 2){$.messager.alert(错误提示, title 失败);} else {$.messager.alert(提示, title 成功);}$(#dg).datagrid(reload);}});}});
效果 2.2修改后
第一步在_Layout.cshtml中合适的地方添加代码 script src~/Scripts/sweetalert2/sweetalert2.min.js typetext/javascript/scriptlink relstylesheet href~/Scripts/sweetalert2/sweetalert2.min.css typetext/css /
第二步修改后的网页代码
$.ajax({url: /AlertConf,data: {FID:FID},type: POST,success: function (data) {if (data 0) {$.messager.alert(错误提示, 登录信息出现变化请重新登录);} else if (data 2){$.messager.alert(错误提示, title 失败);} else {// 弹出一个消息提示框Swal.fire({icon: success, // 消息提示框的图标可以设置为success、error、warning等title: 提示,text: title 成功, // 要显示的消息文本timer: 1000, // 消息框自动关闭的时间毫秒showConfirmButton: false, // 不显示确认按钮position: top,toast: true,showClass: {popup: animate__animated animate__fadeIn //直接显示没有动画//icon: animate__animated animate__fadeIn}});}$(#dg).datagrid(reload);}
});
效果直接在页面div的中间添加toast弹窗 三、总结
后来查看了其实不只asp可以用vue等其实网页都可以用。而且这次还发现了还可以在更多动画Animate.css | A cross-browser library of CSS animations. 附参考文章
Asp.Net Core MVC 里使用 sweetalert 和 toastr 和 bootboxjs 提示样式-CSDN博客
附本文使用到的组件官网 1弹窗消息sweetalertSweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScripts popup boxes
2动画AnimateAnimate.css | A cross-browser library of CSS animations.
